如何在不提交表单的情况下使用jquery ajax发送表单数据？

Question

我在我的页面上有一个表格，我不想提交。这里是我试图基本做的一个例子。当我点击一个按钮时，我想要发送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功能提交表单不会提交。然而，表单只是发送一个ajax post请求到我的url“test.php？t1 = 1 & t2 = 2”，没有我的表单的任何输入值。如果没有preventDefault，表单会提交并导航离开页面。没有发送ajax请求。有没有任何方式发送表单数据到URL“test.php？t1 = 1 & t2 = 2”与ajax请求没有提交表单？

在此先感谢。任何帮助是极大的赞赏。

Answer 1

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

    }) 

Answer 2

以下肮脏的黑客可能工作。还请继续使用preventDefault来阻止表单提交。

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