如何使用jquery ajax发送表单数据而不提交表单?

时间:2015-07-10 09:43:32

标签: javascript jquery ajax forms

我的页面上有一个表单,我不想提交。这是我基本上要做的一个例子。当我点击一个按钮时,我想要发送一个ajax请求但是没有提交表单。这是单击我的按钮时将运行的函数的示例格式:

function clicked()
{
     try {
            var url = "test.php?t1=1&t2=2"
            var postData = $("#myForm").serializeArray();
            $.ajax(
            {
                url : url,
                beforeSend: function (request)
                {
                  request.setRequestHeader('Content-Type', 'text/html;   charset=utf-8');
                },
                type: "POST",
                data : postData,
                contentType: false,
                processData: false,
                success:function(data, status, xhr) 
                {
                    if(status == "success")
                    {
                        alert(data); 
                       // Do something on page
                    }
                    else
                    { 
                      // Do something on page
                    }
                },
            });  
      } 
     catch (e) 
     {
        alert("Error Adding POI:\n" + e);
     }
}

当我使用preventDefault函数禁用表单提交时,表单未提交。但是,表单只是向我的URL“test.php?t1 = 1& t2 = 2”发送一个ajax post请求,而没有我的表单的任何输入值。如果没有preventDefault,表单将提交并导航离开页面。没有发送ajax请求。有没有办法将表单数据发送到url“test.php?t1 = 1& t2 = 2”并带有ajax请求而不提交表单?

提前致谢。非常感谢任何帮助。

2 个答案:

答案 0 :(得分:3)

TRY:

 $('input [type="submit"]').on('click',function(e){
    e.preventDefault();
    var url = "test.php?t1=1&t2=2"
                var postData = $('this').serialize();
                $.ajax(
                {
                    url : url,
                    beforeSend: function (request)
                    {
                      request.setRequestHeader('Content-Type', 'text/html;   charset=utf-8');
                    },
                    type: "POST",
                    data : postData,
                    success:function(data, status, xhr) 
                    {
                        if(status == "success")
                        {
                            alert(data); 
                           // Do something on page
                        }
                        else
                        { 
                          // Do something on page
                        }
                    },
                });  

    })

答案 1 :(得分:0)

当我为您挖掘一些细节时,下面的脏黑客可能会有效。另请继续使用//Change var url = "test.php?t1=1&t2=2" var postData = $("#myForm").serializeArray(); //To var url = "test.php" var postData = "t1=1&t2=2&" + $("#myForm").serialize(); 来阻止表单提交。

try-finally