HTML PAGE：

$('#but1').click(function(){
    $('#frm1').submit(function(){
       var dataString = $(this).serializeArray();
       var formURL = $(this).attr("action");
       alert(dataString);
          $.ajax({  
            type: "POST",
            data: dataString,
            url: formURL,
            success: function(response) {  
                $('#pid').val(response);
                      }         
                });
             });
           });

 <form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
</form>

<button id="but1">Click</button>
<p id="pid"></p>

TEST1.PHP

echo $_POST['test'];

以上代码根本不起作用，我没有得到AJAX调用的任何响应。我是AJAX和PHP的新手。请帮助我。

Answer 1

请尝试以下方法：

$('#but1').click(function(e){
    e.preventDefault();
    $('#frm1').submit();
});    
$('#frm1').submit(function(e){
    e.preventDefault();
    var dataString = $(this).serializeArray();
    var formURL = $(this).attr("action");
    alert(dataString);
    $.ajax({  
        type: "POST",
        data: dataString,
        url: formURL,
        success: function(response) {  
            $('#pid').val(response);
        }       
    });
});

你需要分离你的点击和提交事件回调，只需从点击回调中调用提交功能，然后在表单提交上设置回调...还需要阻止默认操作点击提交按钮

Answer 2

目前，单击该按钮时，会将提交处理程序绑定到表单。您永远不会提交表单，因此处理程序永远不会触发。

段落没有值。只有表单控件才能。

移动表单内的按钮。单击它将提交表单
从按钮中删除点击处理程序。在表单存在时绑定提交处理程序，而不是在单击按钮时绑定。
将$('#pid').val(response);更改为$('#pid').text(response);

Answer 3

最好的办法是处理表单的提交事件，而不是按钮的click事件。通过保持enter键的默认行为以在聚焦字段时提交表单，这大大提高了表单的可访问性。将您的按钮更改为传统提交，如此

<form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
    <button type="submit" id="but1">Click</button>
</form>

然后更改JS以处理提交并返回false以停止默认浏览器操作。

$(document).on('submit', '#frm1', function(){
   var dataString = $(this).serializeArray();
   var formURL = $(this).attr("action");
   alert(dataString);
   $.ajax({  
     type: "POST",
     data: dataString,
     url: formURL,
     success: function(response) {  
         $('#pid').val(response);
     }
   });
 return false;
 });

Answer 4

如果你保持表格相同，你只需要听$('#but1').click()。

$('#but1').click(function(e) {
    e.preventDefault();
    var $form = $('#frm1');

    var dataString = $form.serializeArray();
    var formURL = $form.attr("action");

    $.ajax({
        type: "POST",
        data: dataString,
        url: formURL,
        success: function(response) {  
            $('#pid').val(response);
        }       
    });
});

但是，我建议您更改表单以更像表单。这样，如果用户没有JavaScript，表单仍然会将数据提交到test1.php。

<form id="frm1" action="test1.php">
    <input type="text" id="test" name="test" />
    <input type="submit" value="Click" />
</form>

哪会将你的jQuery改为：

$('#frm1').submit(function(e) {
    e.preventDefault();
    var $form = $(this);

    // AJAX, etc.
});

一个基本的JSFiddle来展示这两个例子。

Answer 5

ajax没有调用你的代码。您错过了点击并提交活动。如果您想通过单击按钮提交ajax呼叫，然后是 试试这个：

 $('#but1').click(function(e){
            var dataString = $("#frm1").serializeArray();
            var formURL = $("frm1").attr("action");
            alert(dataString);
            $.ajax({
                type: "POST",
                data: dataString,
                url: formURL,
                success: function(response) {
                    $('#pid').val(response);
                }
            });
    });
});

通过Ajax和PHP提交表单

HTML PAGE：

TEST1.PHP

5 个答案: