Hjelp, fra jquery til mysql database.

R

Rajohan

Medlem
Hei, jeg vil lagre all film info som kommer opp når du søker på en film på denne siden: Rajohan.net - Versjon 1.0 inn i en database når en submit knapp blir trykket på (ikke lagt til på siden ennå). Jeg er ikke helt sikker på hvordan jeg kan få til dette så noen eksempler på hvordan det gjøres hadde væt fint. Har aldri helt fått til kombinasjonen fra jquery/javasript/ajax og til php
 
adeneo

adeneo

Medlem
Dersom du bruker jQuery så kan du forholdsvis enkelt sende data til serveren med $.ajax, både med GET og POST på vanlig måte, ettersom jQuery normaliserer XMLHttpRequest slik at du ikke trenger et par A4 sider med kode for å få det til å virke i alle nettlesere osv.

Hvis du har et vanlig skjema, noe slikt:

HTML: 
<form id="myForm">
    <input type="text" name="ettFelt" />
    <input type="submit" id="submitButton" />
</form>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Så kan du for eksempel gjøre

Kode: 
$("#myForm")​.on('submit', function(e) {
    e.preventDefault(); //hindre skjemaet fra å bli sendt
    var skjemaData = $(this).serialize(); //man kan serialisere et skjema slik
    $.ajax({
        type: 'POST',
        url: '/urlTil/minside.php',
        data: skjemaData
    });
})​;

dette gjør at scriptet i minside.php filen kjøres i bakgrunnen på serveren, og i den filen har du tilgang til skjemaet i $_POST og kan da lagre verdier tastet inn i skjemaet i PHP, og eventuelt også sende en melding tilbake til Ajax osv.
Med andre ord kan du sende data begge veier.

Skjemaet er tilgjengelig ut i fra navnet på feltene, for eksempel $_POST['ettFelt'], eller du kan forsåvidt bare prøve print_r($_POST) for å se hva som er der.


Du kan også sende bare en enkelt variabel, noe slikt:

Kode: 
$.ajax({
        type: 'POST',
        url: '/urlTil/minside.php',
        data: {minVar : 'Pelle Parafin'}
}).done(function(data) {
     alert(data);
});

og i PHP filen minside.php har du da tilgang til minVar og kan gjøre :

PHP: 
<?php
    $minVar = $_POST['minVar']; //dette gir deg Pelle Parafin
    echo $minVar.'s bølgeband'; //printer ut variablen pluss strengen, som gjør at den returneres tilbake til ajax
    die();
?>

Dette gjør at .done(data); funksjonen nå får tilbake "data", som nå inneholder strengen "Pelle Parafins bølgeband", og alert(data) vil derfor åpne en alert dialog hvor det står nettopp "Pelle Parafins bølgeband", og hvordan du bruker dette, hvilken info du sender frem og tilbake osv. er opptil fantasien.
 
R

Rajohan

Medlem
Har kommet litt på vei lagt ved hva jeg har til nå under her men, det fungerer ikke. Jeg tror det er noe feil fra $("form#submit").submit(function() { og ned i js fila, men firebug gir meg ingen feil melding.

Kode: 
$(document).ready(function() {
	var timer, tittel, filmData = $("#filmdata");
	var title;
	var runtime;

	$('#tittel').on('keyup', function() {
		
    		if (this.value==tittel) { return false; }

    		tittel=this.value;
    		clearTimeout(timer);
    		timer = setTimeout(function() {
       			$.ajax({
            	type: 'GET',
            	beforeSend: function () {
                	$('#error').empty();
                	if (!filmData.is(':visible')) {
                    	filmData.slideDown(400);
                	}
					else {
                    	$("#loader").show();
                    	$('.result').empty();
						$("#poster").hide();
                	}
            	},
            	url: 'http://www.imdbapi.com/?t='+tittel
       	 	})
			.done(function(data) {
            	data = $.parseJSON(data);
            	var cats = filmData.children('li');
				title = data.Title;
				runtime = data.Runtime;
            	$('.result', cats.eq(1)).text(data.Title);
            	$('.result', cats.eq(2)).text(data.Runtime);
            	$('.result', cats.eq(3)).text(data.imdbRating);
            	$('.result', cats.eq(4)).text(data.Genre);
 				$('.result', cats.eq(5)).text(data.Actors);
            	$('.result', cats.eq(6)).text(data.Released);
            	$('.result', cats.eq(7)).text(data.Director);
            	$('.result', cats.eq(8)).text(data.Writer);
				$('.result', cats.eq(9)).text(data.Plot);
            	$('.result', cats.eq(10)).html('<a href="http://www.imdb.com/title/'+data.imdbID+'">Link til IMDB</a>');
            	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/ " + data.Title + "?callback=?", function(json) {
                	if (json != "Nothing found.") {
                    	$('#poster').prop('src', json[0].posters[0].image.url).show();
						$("#loader").hide();
               		}
					else {
                    	cats.eq(0).find('img').hide();
						$("#loader").hide();
                	}
           		});
        	})
			.fail(function() {
            	$("#filmdata").slideUp(400);
            	$('#error').append('<br><br>Det oppsto en feil !');
        	});
    	}, 700);
	});
	$("form#submit").submit(function() {
		var post = "done";
		$.ajax({
			type: "POST",
			url: "/customers/rajohan.net/rajohan.net/httpd.www/test2.php",
			data: "post="+post+"&title="+title+"&runtime="+runtime,
			success: function(){
				$('div.succses').show();
			}
		});
		return false;
	});
});


HTML: 
<style>
#filmdata {display: none;}
.succses {display: none;}
li {list-style:none;}
#loader {height: |80px; width: 120px;}
#poster {display:none; height: 180px; width: 120px;}
</style>
<form id="submit" method="post">
<b>Her kan du enkelt gjøre ett hurtigsøk på en film tittel å få opp det meste av nyttig informasjon tilhørende filmen.</b>
<br />
<br />
<br />
<label for="tittel">Film tittel: <input type="text" id="tittel" /> (Søker automatisk)</label>
<br />
<br />
<ul id="filmdata">
	<li><img src="http://www.deadmau5.com/wp-content/themes/deadmau5/images/ajax-loader.gif" id="loader" /><img src="" id="poster" /></li><br />
    <li><b class="desc">Film tittel: </b><span class="result"></span></li>
    <li><b class="desc">Lengde: </b><span class="result"></span></li>
    <li><b class="desc">IMDB rating: </b><span class="result"></span></li>
    <li><b class="desc">Sjanger: </b><span class="result"></span></li>
    <li><b class="desc">Utgitt: </b><span class="result"></spa>n</li>
    <li><b class="desc">Skuespillere: </b><span class="result"></span></li>
    <li><b class="desc">Regissør: </b><span class="result"></span></li>
    <li><b class="desc">Forfatter: </b><span class="result"></span></li>
    <li><b class="desc">Beskrivelse: </b><span class="result"></span></li><br />
    <li><span class="result" style="top: 20px;"></span></li>
</ul>

<div id="error"></div>

<div class="succses">Film lagt til</div>

<input type="submit" id="add_movie" value="Legg til film" />
</form>

PHP: 
<?php
include('config.php');
db_connect();
	if($_POST['post'] == "done"){
			// CLIENT INFORMATION
			$title       = htmlspecialchars(trim($_POST['title']));
			$runtime        = htmlspecialchars(trim($_POST['runtime']));

   		 $addClient  = "INSERT INTO movies (title,runtime) VALUES ('$title','$runtime')";
    		mysql_query($addClient) or die(mysql_error());

	}
?>
 
adeneo

adeneo

Medlem
Prøv :

Kode: 
data: {post : post, title : title, runtime : runtime},

ettersom querystrings bare virker med GET requests.
 
R

Rajohan

Medlem
så ikke ut til å gjøre noen forskjell. Siden reloader fortsatt når jeg trykker på submit å det ser ikke ut til å skje stort.
 
adeneo

adeneo

Medlem
Kan ikke se noe umiddelbart som skulle gjøre det (jQuery er selvfølgelig inkludert riktig ?), men dersom return false ikke virker så ville jeg vel tro det var noe feil i javascriptet et sted.

Du kan bare for morro skyld prøve:

Kode: 
$("#submit").on('submit', function(e) {
      e.preventDefault();
      $.ajax({
          type: "POST",
          url: "/customers/rajohan.net/rajohan.net/httpd.www/test2.php",
          data: {post:"done", title:title, runtime:runtime},
          success: function(){
              $('.succses').show();
          }
     });
});
 
Du må logge inn eller registrere deg for å svare her.
Topp