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

Posted 2023-05-08

【中文标题】使用 AJAX PHP JQuery 提交表单将我带到操作页面

【英文标题】：Submit Form with AJAX PHP JQuery takes me to action page

【发布时间】：2013-11-03 01:30:41

【问题描述】：

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

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

【参考方案1】：

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

示例

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

【参考方案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;
    
);

【讨论】：

我把 event.preventDefault();没有任何反应，提交按钮停止工作:(

你试过用 return false 吗？？

是的，我使用了 boyh event.preventDefault();并返回假。如果我添加这些按钮停止工作，什么都不会发生。

使用一个 .. preventDefault 或 return false

【参考方案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;
);

【讨论】：

小小帮助怎么做这样的事情 $( ".list #"+clickedId ).remove();

【参考方案4】：

使用event.preventDefault()

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

【参考方案5】：

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

);

【讨论】：

如果我把 event.preventDefault();没有任何反应，提交按钮停止工作:(

您在$.ajax 通话中的url 是什么？

来自这个表单：

检查控制台。你能从这个 ajax 调用中得到响应吗？

【参考方案6】：

试试这个..

<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
                

            );

【讨论】：

但它需要一个输入字段的值。

但是使用我的代码，我可以添加任何输入字段，而无需在我的脚本中添加任何内容:)