使用 AJAX 提交表单 PHP JQuery 将我带到操作页面 - Submit Form with AJAX PHP JQuery takes me to action page

Submit Form with AJAX PHP JQuery takes me to action page

我正在尝试在不刷新页面的情况下提交此表单，但是当我提交时，它会将我带到操作页面。我的代码有什么问题？这是我的表格：

<form class="ajax" action="/../addchannel/createUser.php" method="post" >
<input type="text" name="userName" placeholder="userName"><br>
<input type="text" name="email" placeholder="email"><br>
<input  type="submit" value="submit" >
</form>';

这是我的脚本：

$('form.ajax').on('submit', function () {
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};
    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
$.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
});
});

将事件作为参数传递并使用event.preventDefault() 。

例

$('form.ajax').on('submit', function (e) {
      e.preventDefault();

您忘记了最后的return false或阻止默认值。

 $('form.ajax').on('submit', function (event) {
    event.preventDefault();
var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
   ....
  //or return false;
    
});

使用 e.preventDefault（）或 return false; 来阻止表单提交

$('form.ajax').on('submit', function (e) {//Pass the event argument here
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};
    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
   $.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
   });
 e.preventDefault(); 
 //OR
return false;
});

use event.preventDefault（）

$('form.ajax').on('submit', function (e) {
    e.preventDefault();
    //code here
});

使用 jQuery ajax 不会阻止浏览器遵循表单操作页面。要实现这一点，你应该通过简单的函数来阻止浏览器这样做：e.preventDefault（）

这是你的代码：

//Pass the event argument (e)
$('form.ajax').on('submit', function (e) { 
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};
    that.find(['name']).each(function (index, value)) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;
    });
$.ajax({
    url: url,
    type: type,
    data: data,
    success: function (response) {
        consol.log(response)
    }
});
//Prevent Browser to follow form action link:
e.preventDefault();
//you can use also
// return false;
});

试试这个。

<form method='post' action="javascript:mail();" >
<input type="text" class="input-large" id="user_name" name="name">
<input type="text" class="input-large" id="email" name="name">
<button type="submit" class="btn btn-primary">Submit</a>
</form>
function mail()
{
var name = $("#user_name").val();
var email = $("#email").val();
$.ajax({
                type:       "POST",
                url:        "contact.php",
            data:        "name=" + name+"&customer_mail="+email,
                success:    function(html) {
            //do ur function
                }
            });

}