Fatal编程技术网
  • javascript/
  • Javascript 使用AJAX PHP JQuery提交表单将我带到操作页面

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

javascript php jquery ajax forms

Javascript 使用AJAX PHP JQuery提交表单将我带到操作页面,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我试图在不刷新页面的情况下提交此表单，但当我提交时，它会将我带到操作页面。我的代码有什么问题？ 这是我的表格： <form class="ajax" action="/../addchannel/createUser.php" method="post" > <input type="text" name="userName" placeholder="userName"><br> <input type="text" name="email" plac

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

<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>';
u在结尾处忘记
返回false
，或防止默认值

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

});
u在结尾处忘记
返回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（）

示例

$('form.ajax').on('submit', function (e) {
      e.preventDefault();
将事件作为参数传递，并使用
event.preventDefault（）

示例

$('form.ajax').on('submit', function (e) {
      e.preventDefault();
使用或
返回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;
});


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


使用

使用

试试这个


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

            });


}




提交
功能邮件（）
{
var name=$（“#用户名”）.val（）；
var email=$（“#email”）.val（）；
$.ajax({
类型：“POST”，
url:“contact.php”，
数据：“name=“+name+”&customer_-mail=“+email，
成功：函数（html）{
//做你的功能
}
});
}

试试这个


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

            });


}




提交
功能邮件（）
{
var name=$（“#用户名”）.val（）；
var email=$（“#email”）.val（）；
$.ajax({
类型：“POST”，
url:“contact.php”，
数据：“name=“+name+”&customer_-mail=“+email，
成功：函数（html）{
//做你的功能
}
});
}

使用jQuery ajax不会阻止浏览器跟随表单操作页面。
要实现这一点，应防止浏览器通过简单的功能来实现：

这是您的代码：


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

});



使用jQueryAjax并不会阻止浏览器跟随表单操作页面。
要实现这一点，应防止浏览器通过简单的功能来实现：

这是您的代码：


//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（）中；什么都没有发生，提交按钮停止工作：（你是否尝试了return false？是的，我使用了boyh event.preventDefault（）；和return false。如果我添加这些按钮，则什么都不会发生。使用一个..preventDefault或return Falsit我放置了event.preventDefault（）；什么都不会发生，提交按钮停止工作：（你是否尝试过使用return false？？是的，我使用了boyh event.preventDefault（）；返回false。如果我添加这些按钮，则不会发生任何事情。使用一个..如果我放置event.preventDefault（），则使用preventDefault或return false；不会发生任何事情，提交按钮会停止工作：（你在
$.ajax
调用中的
url
是什么？从这个表单：url=that.attr（'action'），检查控制台。你从这个ajax调用中得到响应了吗？如果我放置event.preventDefault（）；什么都没有发生，提交按钮停止工作：（你在
$.ajax
调用中的
url
是什么？从这个表单：url=that.attr（'action'）），检查控制台。这个ajax调用有响应吗？但它需要一个输入字段的值。但是使用我的代码，我可以添加任何输入字段的值，而不需要在脚本中添加任何内容：），但它需要一个输入字段的值。但是使用我的代码，我可以添加任何输入字段的值，而不需要在脚本中添加任何内容：）小帮助如何执行此$（“.list.#”+单击EDID.remove（）；小帮助如何执行此$（“.list.#”+单击EDID.remove（）；