Ajax调用和返回结果

Question

我不知道我在ajax调用中做了什么错误。我想将数据返回到我的脚本并使用它，但它不返回结果。以下是我想澄清的一些事情，以及我对ajax编程的新东西。如果ajax调用成功并将结果返回给脚本。结果将在脚本中的哪里出现。我将创建一个保存结果或数组... 下面是HTML

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform"> 
    <div id="response"></div> 
     <div> 
     <label>Name</label><input type="text" name="name" id="nameid"> 
    </div> 
    <div> 
     <label>Phone Number</label><input type="text" name="phone" id="phoneid"> 
    </div> 
     <div> 
     <button type="submit" class="btn" id="btnsubmit">Submit</button> 
    </div> 
    </form> 
     <div id="success"></div> 


//my script 

$('#btnsubmit').click(function(e){ 
    e.preventDefault(); 
     var nameid = $('#nameid').val(); 
    var phoneid = $('#phoneid').val(); 
     var validate_msg = ''; 
     if (nameid == ''){ 
     validate_msg = '<p> Name is Required. </p>';  
    } 
    if (phoneid == '' || ($.isNumeric(phoneid) == false)){ 
     validate_msg += '<p> Phone field is either empty or non numeric. </p>'; 
    } 

    if (validate_msg != ''){ 
    $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' + validate_msg); 
    } else { 
     var formData = $('form #reserveForm').serialize(); 
     submitForm(formData); 
    } 
}); 


    function submitForm(formData){ 
     $.ajax({ 
      type: 'POST', 
      url: 'reservation.php', 
      data:formData, 
      dataType:'json', 
      success: function(data){ 
       $("#success").html(data); 
      }, 
      error: function(XMLHttpResponse, textStatus, errorThrown){ 
        $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition'); 
      } 
     }); 

    } 

Answer 1

如果你想ajax form submission和需要填充的结果在成功DIV without refresh，则需要return false

不要使用

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform"> 

这里不需要形式的行动，尝试像

<form id="reserveform" onsubmit="return submitForm();"> 

在功能使用form serialize所以在所有形式的输入元件值将可用

function submitForm(){ 
     var formData = $("#reserveform").serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'reservation.php', 
      data:formData, 
      dataType:'json', 
      success: function(data){ 
       $("#success").html(data); 
      }, 
      error: function(XMLHttpResponse, textStatus, errorThrown){ 
        $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition'); 
      } 
     }); 
     return false; // use this otherwise the form will be submitted and results an entire page refresh 
    } 

Answer 2

请尽量将

你要的onload把btnSubmit按钮单击事件中或文档准备

$(document).ready(function() 
    { 

    $('#btnsubmit').click(function(e){ 
     e.preventDefault(); 
      var nameid = $('#nameid').val(); 
     var phoneid = $('#phoneid').val(); 
      var validate_msg = ''; 
      if (nameid == ''){ 
      validate_msg = '<p> Name is Required. </p>';  
     } 
     if (phoneid == '' || ($.isNumeric(phoneid) == false)){ 
      validate_msg += '<p> Phone field is either empty or non numeric. </p>'; 
     } 

     if (validate_msg != ''){ 
     $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' + validate_msg); 
     } else { 
      var formData = $('form #reserveForm').serialize(); 
      submitForm(formData); 
     } 
    }); 

    } 

    ); 

Answer 3

，因为数据是JSON格式你不能这样使用$("#success").html(data);。在这里，数据是一个对象。你需要解析它并分配给标签。

Answer 4

我看到您配置了表单以提交到您已在的同一文档。这很好，我们一直这样做。

但是，您也停止提交表单，然后使用AJAX提交值。您指定reservation.php作为您的ajax处理器。这是你已经在同一个PHP页面吗？如果是这样，那么我知道问题是什么：你不能那样做。

通过设计，AJAX必须使用外部PHP文件来处理AJAX。如果您尝试在同一文档中执行此操作，那么AJAX只会回显文档本身的完整HTML。

简答：使用外部PHP文件。这是设计。

有关此问题的更多信息，请参阅this other answer。

看到这些其他职位有关AJAX和进一步的信息获取方式进入PHP处理脚本，并从PHP处理脚本返回信息回：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1