通过AJAX发送表单数据到PHP文件

Question

我已经尝试了几个小时了，我不知道还有什么要尝试。我在这里看了几十个问题，但他们太复杂了，或者我不明白他们。没有帮助，我的经验与JavaScript/jQuery日期日期前几天。 不管怎么说，这是我的形式：

<form onsubmit="onSubmit(this)"> 
    <input type="text" name="input1"/><br/> 
    <input type="text" name="input2"/><br/> 
</form> 

而且我的脚本：

function onSubmit(form){ 
    var jsondate = JSON.stringify($(form).serializeArray()); 
    console.log(jsondate); 
    alert(jsondate); 
    $.ajax({ 
     type: "POST", 
     url: "json.php", 
     data: jsondate, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data){ 
      alert(jsondate); 
     }, 
     failure: function(errMsg) { 
      alert(errMsg); 
     } 
    }); 
} 

而且我json.php文件：

<?php 
if (isset($_POST['jsondate'])) { 
    echo "whatever"; 
} 

的事情是，我得到的警告与JSON字符串，但是当它将我重定向到json.php（在表单上使用action="json.php"），或者我留在页面上时，它不显示任何内容，所以我猜这是$.ajax({...})

关于如何使其工作，它是如何工作以及为什么会非常有用的任何解释！

Answer 1

您需要一种方法来获取元素的值。在这个例子中，我将使用的HTML的ID并获得在JavaScript

HTML使用它：

<form onsubmit="onSubmit(this)"> 
    <input type="text" id="ID1"><br/> 
    <input type="text" id="ID2"><br/> 
</form> 

JavaScript：

var v1 = $("#ID1").val(); // Get de value using the Ids 
var v2 = $("#ID2").val(); 
$.ajax({ 
    method: "POST", 
    url: "json.php", // add the page here 
    data: { name: v1, location: v2 } // put the data here (Will get this data using POST) 
}) 
    .done(function(msg) { 
    alert("Data Saved: " + msg); // if it works this alert will appear 
}); 

Answer 2

两个问题：您没有为表单元素提供名称，也没有停止表单提交。

这里有一个解决方案使用尽可能多的jQuery。

首先，为了方便起见，给你的表单一个ID。

二，要求，给你的表单域的名称。

<form id="form1"> 
    <input type="text" name="input1"><br/> 
    <input type="text" name="input2"><br/> 
</form> 

第三，重视使用.submit(handler)到您的形式onsubmit事件处理程序。

$('#form1').submit(function (e) { 
    // prevent the form from submitting/reloading (by default) 
    e.preventDefault(); 
    // 
    $.ajax({ 
     type: "POST", 
     url: "json.php", 
     data: $(this).serializeArray(), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data){ 
      alert(jsondate); 
     }, 
     failure: function(errMsg) { 
      alert(errMsg); 
     } 
    }); 
}); 

第四，在你json.php，你就可以访问域

echo $_POST['input1']; 
echo $_POST['input2'];