JQuery AJAX POST su PHP pavyzdžiu

Bandau siųsti duomenis iš formos į duomenų bazę. Čia yra forma, kurią naudoju:

 <form name="foo" action="form.php" method="POST" id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /> </form> 

Tipiškas metodas būtų pateikti formą, tačiau tai verčia naršyklę nukreipti. Naudodami jQuery ir Ajax , galite užfiksuoti visus formų duomenis ir siųsti juos į PHP scenarijų (pvz., .Php pavyzdžio formoje)?

512
15 февр. Nustatyta vasario 15 d 2011-02-15 16:28 '11 at 16:28 2011-02-15 16:28
@ 11 atsakymų

Pagrindinis „ .ajax bus toks:

HTML:

 <form id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /> </form> 

Jquery

 // Variable to hold request var request; // Bind to the submit event of our form $("#foo").submit(function(event){ // Prevent default posting of form - put here to work in case of errors event.preventDefault(); // Abort any pending request if (request) { request.abort(); } // setup some local variables var $form = $(this); // Let select and cache all the fields var $inputs = $form.find("input, select, button, textarea"); // Serialize the data in the form var serializedData = $form.serialize(); // Let disable the inputs for the duration of the Ajax request. // Note: we disable elements AFTER the form data has been serialized. // Disabled form elements will not be serialized. $inputs.prop("disabled", true); // Fire off the request to /form.php request = $.ajax({ url: "/form.php", type: "post", data: serializedData }); // Callback handler that will be called on success request.done(function (response, textStatus, jqXHR){ // Log a message to the console console.log("Hooray, it worked!"); }); // Callback handler that will be called on failure request.fail(function (jqXHR, textStatus, errorThrown){ // Log the error to the console console.error( "The following error occurred: "+ textStatus, errorThrown ); }); // Callback handler that will be called regardless // if the request failed or succeeded request.always(function () { // Reenable the inputs $inputs.prop("disabled", false); }); }); 

Pastaba Kadangi jQuery 1.8, .success() , .error() ir .complete() yra pasenę .done() , .fail() ir .always() ,.

Pastaba Atminkite, kad pirmiau minėtas fragmentas turi būti įvykdytas po DOM, taigi jūs turite įdėti jį į $(document).ready() (arba naudoti sutrumpintą $() ).

Taryba Galite $.ajax().done().fail().always(); atgalinio ryšio tvarkykles: $.ajax().done().fail().always();

PHP (t.y. form.php):

 // You can access the values posted by jQuery.ajax // through the global variable $_POST, like this: $bar = isset($_POST['bar']) ? $_POST['bar'] : null; 

Pastaba Visada išvalykite paskelbtus duomenis, kad būtų išvengta injekcijų ir kitų kenksmingų kodų.

Taip pat galite naudoti sutrumpintą .post o ne .ajax pirmiau .ajax „JavaScript“ kode:

 $.post('/form.php', serializedData, function(response) { // Log the response to the console console.log("Response: "+response); }); 

Pastaba: aukščiau minėtas „JavaScript“ kodas skirtas dirbti su jQuery 1.8 ir vėlesnėmis versijomis, tačiau jis turėtų veikti su ankstesnėmis versijomis iki 1.5.

791
15 февр. Atsakymą pateikė Marcus Ekwall vasario 15 d. 2011-02-15 16:32 '11 at 16:32 2011-02-15 16:32

Jei norite pateikti „ajax“ užklausą naudojant „jQuery“, tai galite padaryti nurodydami kodą

HTML:

 <form id="foo"> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input type="submit" value="Send" /> </form> <!-- The result of the search will be rendered inside this div --> <div id="result"></div> 

„Javascript“:

1 metodas

   var values = $(this).serialize(); $.ajax({ url: "test.php", type: "post", data: values , success: function (response) { // you will get response from your php page (what you echo or print) }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); } }); 

2 metodas

  $("#foo").submit(function(event) { var ajaxRequest;  event.preventDefault();  $("#result").html('');  var values = $(this).serialize();   ajaxRequest= $.ajax({ url: "test.php", type: "post", data: values });  ajaxRequest.done(function (response, textStatus, jqXHR){ // show successfully for submit message $("#result").html('Submitted successfully'); });  ajaxRequest.fail(function (){ // show error $("#result").html('There is error while submit'); }); 

.success() , .error() ir .complete() pasenę su jQuery 1.8. Norėdami paruošti kodą galimam pašalinimui, naudokite .done() , .fail() ir .always() .

MDN: abort() . Jei prašymas jau išsiųstas, šis metodas nutraukia užklausą.

todėl mes jau kurį laiką sėkmingai išsiuntėme „ajax“ užklausą, kad užfiksuotume duomenis serveryje.

Php

Kai pateikiame POST užklausą „ajax“ skambutyje ( type: "post" ), dabar galime užfiksuoti duomenis naudodami $_REQUEST arba $_POST

  $bar = $_POST['bar'] 

Taip pat galite pamatyti, ką gaunate POST užklausoje, arba tiesiog: Btw įsitikinkite, kad $ _POST yra nurodytas kitaip, gausite klaidą.

 var_dump($_POST); // or print_r($_POST); 

Be to, įterpdami vertę į duomenų bazę, įsitikinkite, kad prieš pateikdami užklausą jautrinkite ar vengiate teisingo užklausos (oras, kurį padarėte GET arba POST), „Best“ naudos paruoštas instrukcijas.

ir jei norite grąžinti duomenis į puslapį, galite tai padaryti tiesiog pakartodami šiuos duomenis, kaip parodyta žemiau.

 // 1. Without JSON echo "hello this is one" // 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below echo json_encode(array('returned_val' => 'yoho')); 

ir jūs galite jį gauti kaip

  ajaxRequest.done(function (response){ alert(response); }); 

Yra keletas sutrumpintų metodų , galite naudoti žemiau esantį kodą, jis atlieka tą patį darbą.

 var ajaxRequest= $.post( "test.php",values, function(data) { alert( data ); }) .fail(function() { alert( "error" ); }) .always(function() { alert( "finished" ); }); 
165
08 янв. Atsakymas pateikiamas NullPoiiteya 08 sausis 2013-01-08 18:06 '13, 18:06 2013-01-08 18:06

Norėčiau pasidalinti išsamiu skelbimo metodu, naudodamas PHP + Ajax, ir klaidas, kurios buvo grąžintos.

Visų pirma, sukurkite du failus, pvz., form.php ir process.php .

Pirmiausia mes sukursime form , kuri bus pateikta naudojant jQuery .ajax() metodą. Likusi dalis bus paaiškinta komentaruose.


form.php

 <form method="post" name="postForm"> <ul> <li> <label>Name</label> <input type="text" name="name" id="name" placeholder="Bruce Wayne"> <span class="throw_error"></span> </li> </ul> <input type="submit" value="Send" /> </form> 


Patvirtinkite formą su jQuery kliento pusės patvirtinimu ir pateikite duomenis process.php .

 $(document).ready(function() { $('form').submit(function(event) { //Trigger on form submit $('#name + .throw_error').empty(); //Clear the messages first $('#success').empty(); //Validate fields if required using jQuery var postForm = { //Fetch form data 'name' : $('input[name=name]').val() //Store name fields value }; $.ajax({ //Process the form using $.ajax() type : 'POST', //Method type url : 'process.php', //Your form processing file URL data : postForm, //Forms name dataType : 'json', success : function(data) { if (!data.success) { //If fails if (data.errors.name) { //Returned if any error from process.php $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error } } else { $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message } } }); event.preventDefault(); //Prevent the default submit }); }); 

Dabar pažvelgsime į process.php

 $errors = array(); //To store errors $form_data = array(); //Pass back the data to `form.php`  if (empty($_POST['name'])) { //Name cannot be empty $errors['name'] = 'Name cannot be blank'; } if (!empty($errors)) { //If errors in validation $form_data['success'] = false; $form_data['errors'] = $errors; } else { //If not, process the form, and return true on success $form_data['success'] = true; $form_data['posted'] = 'Data Was Posted Successfully'; } //Return the data back to form.php echo json_encode($form_data); 

Projekto failus galima atsisiųsti iš http://projects.decodingweb.com/simple_ajax_form.zip .

37
atsakymas pateikiamas p. 17 янв. Alien Jan 17 2014-01-17 20:24 '14, 20:24, 2014-01-17 20:24

Galite naudoti serializaciją. Toliau pateikiamas pavyzdys.

 $("#submit_btn").click(function(){ $('.error_status').html(); if($("form#frm_message_board").valid()) { $.ajax({ type: "POST", url: "<?php echo site_url('message_board/add');?>", data: $('#frm_message_board').serialize(), success: function(msg) { var msg = $.parseJSON(msg); if(msg.success=='yes') { return true; } else { alert('Server error'); return false; } } }); } return false; }); 
20
10 сент. atsakymas, kurį pateikė user2610222 Sep 10 2013-09-10 12:10 '13, 12:10, 2013-09-10 12:10

HTML

  <form name="foo" action="form.php" method="POST" id="foo"> <label for="bar">A bar</label> <input id="bar" class="inputs" name="bar" type="text" value="" /> <input type="submit" value="Send" onclick="submitform(); return false;" /> </form> 

„Javascript“ :

  function submitform() { var inputs = document.getElementsByClassName("inputs"); var formdata = new FormData(); for(var i=0; i<inputs.length; i++) { formdata.append(inputs[i].name, inputs[i].value); } var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest; } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4  xmlhttp.status == 200) { } } xmlhttp.open("POST", "insert.php"); xmlhttp.send(formdata); } 
16
07 янв. Atsakymą DDeme pateikė sausio 7 d 2015-01-07 12:38 '15, 12:38 val. 2015-01-07 12:38

Aš naudoju šį metodą. Jis pateikia viską kaip failus.

 $(document).on("submit", "form", function(event) { event.preventDefault(); var url=$(this).attr("action"); $.ajax({ url: url, type: 'POST', dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { console.log("error"); } }); }); 
12
04 февр. atsakymas pateikiamas Shaiful Islam 04 vasaris. 2015-02-04 00:41 '15 prie 0:41 2015-02-04 00:41
 <script src="http://code.jquery.com/jquery-1.7.2.js"></script> <form method="post" id="form_content" action="Javascript:void(0);"> <button id="desc" name="desc" value="desc" style="display:none;">desc</button> <button id="asc" name="asc" value="asc">asc</button> <input type='hidden' id='check' value=''/> </form> <div id="demoajax"></div> <script> numbers = ''; $('#form_content button').click(function(){ $('#form_content button').toggle(); numbers = this.id; function_two(numbers); }); function function_two(numbers){ if (numbers === '') { $('#check').val("asc"); } else { $('#check').val(numbers); } //alert(sort_var); $.ajax({ url: 'test.php', type: 'POST', data: $('#form_content').serialize(), success: function(data){ $('#demoajax').show(); $('#demoajax').html(data); } }); return false; } $(document).ready(function_two()); </script> 
8
10 сент. atsakymas duotas John 10 Sep. 2014-09-10 15:26 '14, 15:26 2014-09-10 15:26

Jei norite siųsti duomenis, naudodami „Jquery Ajax“, tada nereikia formų žyma ir pateikti mygtuką

Pavyzdys:

 <script> $(document).ready(function () { $("#btnSend").click(function () { $.ajax({ url: 'process.php', type: 'POST', data: {bar: $("#bar").val()}, success: function (result) { alert('success'); } }); }); }); </script> <label for="bar">A bar</label> <input id="bar" name="bar" type="text" value="" /> <input id="btnSend" type="button" value="Send" /> 
5
13 апр. Juned Ansari paskelbė balandžio 13 dieną 2017-04-13 16:08 '17 at 4:08 pm 2017-04-13 16:08

Aš naudoju šį paprastą kodą keletą metų be problemų. (Tam reikia žaisti)

 <script type="text/javascript"> function ap(x,y) {$("#" + y).load(x);}; function af(x,y) {$("#" + x ).ajaxSubmit({target: '#' + y});return false;}; </script> 

Čia ap () reiškia ajax puslapį, o af () reiškia ajax-formą. Tokiu būdu, kuris tiesiog vadina af () funkciją, formą atsiunčiate į URL ir įkeliate atsakymą į norimą HTML elementą.

 <form> ... <input type="button" onclick="af('http://example.com','load_response')"/> </form> <div id="load_response">this is where response will be loaded</div> 
2
08 мая '16 в 17:22 2016-05-08 17:22 atsakymą pateikė Uchiha Itachi , gegužės 08–16 d. 17:22 2016-05-08 17:22
  handling ajax error and loader before submit and after submit success show alert bootbox with example: var formData = formData; $.ajax({ type: "POST", url: url, async: false, data: formData, //only input processData: false, contentType: false, xhr: function () { $("#load_consulting").show(); var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = (evt.loaded / evt.total) * 100; $('#addLoad .progress-bar').css('width', percentComplete + '%'); } }, false); //Download progress xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; } }, false); return xhr; }, beforeSend: function (xhr) { qyuraLoader.startLoader(); }, success: function (response, textStatus, jqXHR) { qyuraLoader.stopLoader(); try { $("#load_consulting").hide(); var data = $.parseJSON(response); if (data.status == 0) { if (data.isAlive) { $('#addLoad .progress-bar').css('width', '00%'); console.log(data.errors); $.each(data.errors, function (index, value) { if (typeof data.custom == 'undefined') { $('#err_' + index).html(value); } else { $('#err_' + index).addClass('error'); if (index == 'TopError') { $('#er_' + index).html(value); } else { $('#er_TopError').append('<p>' + value + '</p>'); } } }); if (data.errors.TopError) { $('#er_TopError').show(); $('#er_TopError').html(data.errors.TopError); setTimeout(function () { $('#er_TopError').hide(5000); $('#er_TopError').html(''); }, 5000); } } else { $('#headLogin').html(data.loginMod); } } else { // document.getElementById("setData").reset(); $('#myModal').modal('hide'); $('#successTop').show(); $('#successTop').html(data.msg); if (data.msg != ''  data.msg != "undefined") { bootbox.alert({closeButton: false, message: data.msg, callback: function () { if (data.url) { window.location.href = '<?php echo site_url() ?>' + '/' + data.url; } else { location.reload(true); } }}); } else { bootbox.alert({closeButton: false, message: "Success", callback: function () { if (data.url) { window.location.href = '<?php echo site_url() ?>' + '/' + data.url; } else { location.reload(true); } }}); } } } catch (e) { if (e) { $('#er_TopError').show(); $('#er_TopError').html(e); setTimeout(function () { $('#er_TopError').hide(5000); $('#er_TopError').html(''); }, 5000); } } } }); 
2
18 мая '16 в 9:33 2016-05-18 09:33 atsakymas duotas pawan sen gegužės 18, 16, 9:33 2016-05-18 09:33

Sveiki, patikrinkite, ar tai yra visas „ajax“ užklausos kodas.

  $('#foo').submit(function(event) { // get the form data // there are many ways to get this data using jQuery (you can use the class or id also) var formData = $('#foo').serialize(); var url ='url of the request'; // process the form. $.ajax({ type : 'POST', // define the type of HTTP verb we want to use url : 'url/', // the url where we want to POST data : formData, // our data object dataType : 'json', // what type of data do we expect back. beforeSend : function() { //this will run before sending an ajax request do what ever activity you want like show loaded }, success:function(response){ var obj = eval(response); if(obj) { if(obj.error==0){ alert('success'); } else{ alert('error'); } } }, complete : function() { //this will run after sending an ajax complete }, error:function (xhr, ajaxOptions, thrownError){ alert('error occured'); // if any error occurs in request } }); // stop the form from submitting the normal way and refreshing the page event.preventDefault(); }); 
1
23 окт. atsakymas, kurį pateikė Waseem Bashir 23 okt. 2017-10-23 09:58 '17 ne 9:58 am 2017-10-23 09:58

Kiti klausimai apie „ žymes arba „ Klauskite“