Mehrere Variablen in AJAX-Form zurückbringen POST-Erfolg als jQuery-Variablen

Question

Ich bin sehr neu zu AJAX.

Was ich hier versuche, ist bringt einige Variablen aus einer PHP-Datei zurück, die ich hauptsächlich geschrieben habe, um ein HTML-Formular Daten in MySql db Tabelle zu verarbeiten.

Nach einigen Recherchen kam ich zu dem Schluss, dass ich Json (erstes Mal) verwenden muss und ich muss den Teil dataType:'json' zu meinem Ajax hinzufügen.

Mein Problem ist, dass ich nach dem Hinzufügen dieses Teils nicht mehr in der Lage bin, das Formular einzureichen!

Kann jemand bitte lassen Sie mich wissen, was mache ich hier falsch? Ich muss nur den PHP Code verarbeiten und die drei erwähnten Variablen in eine jquery Variable zurückgeben, damit ich einige Sachen mit ihnen machen kann.

Vielen Dank im Voraus.

AJAX:

var form = $('#contact-form'); 


var formMessages = $('#form-messages'); 


form.submit(function(event) { 

     event.preventDefault(); 

     var formData = form.serialize(); 

     $.ajax({ 
      type:  'POST', 
      url:  form.attr('action'), 
      data:  formData, 
      dataType: 'json', //after adding this part, can't anymore submit the form 
      success: function(data){ 

       var message_status = data.message_status; 
       var duplicate  = data.duplicate; 
       var number   = data.ref_number; 
       //Do other stuff here 
       alert(number+duplicate+number); 

      } 
     }) 
}); 

PHP:

//other code here 

$arr = array(
    'message_status'=>$message_status, 
    'duplicate'=>$duplicate, 
    'ref_number'=>$ref_number 
); 
echo json_encode($arr); 

Answer 1

Die Art und Weise Sie die Formularmethode ist falsch angegeben haben.

type:  'POST', 

zu

method:  'POST', 

ändern Und geben, dass ein Versuch. Können Sie Ihre Antwort protokollieren und hier posten? Überprüfen Sie außerdem Ihre Konsole auf Fehler.

Answer 2

Wenn Ihr dataType json ist, müssen Sie ein Json-Objekt senden. Form.serialize() gibt Ihnen jedoch URL-codierte Daten. (kaufmännisches Und getrennt).

Sie müssen Daten als JSON-Objekt vorbereiten:

Hier ist die Erweiterungsfunktion können Sie hinzufügen:

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name]) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

Kredit geht an: Difference between serialize and serializeObject jquery