Question

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

<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)
    }
});
});

Answer 1

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

示例

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

Answer 2

你最后忘了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;

});

Answer 3

使用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;
});

Answer 4

使用event.preventDefault()

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

Answer 5

试试这个..

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

            });


}

Answer 6

使用jQuery ajax并不妨碍浏览器遵循Form Action页面。要实现这一点，您应该通过简单的功能阻止浏览器执行此操作：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;

});

使用AJAX提交表单PHP JQuery将我带到操作页面

6 个答案: