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中的action，试试like

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