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

请试试这个

你必须将btnsubmit点击事件放在onload或document ready
中

 $(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

您无法使用此$("#success").html(data);，因为数据采用json格式。这里，数据是一个对象。您需要解析它并分配给标签。

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

Ajax调用和返回结果

4 个答案: