如何使用AJAX發送數據
[英]How to send data using AJAX
問題描述
我的問題/問題是關於如何使用JSON將數據從表單發送到PHP頁面。 我嘗試了多種方法，但由於某種原因，它不起作用。 我相信我發送的數據不正確，這就是為什么我無法在PHP頁面上接收數據的原因。
這是我的登錄頁面上的代碼（使用HTML和JavaScript）：
<!DOCTYPE html> <html> <body> <h2>UserName and Password</h2> <form ID = "PassUser"> Enter UserName: <input type="text" id="username" > Enter Password: <input type="password" id="password"> <br><br> <input type="submit" value = "Submit" onclick = "submit_form()"> </form> <script> function submit_form() { var user = document.getElementById("username").value; var pass = document.getElementById("password").value; var data = {} data.uname = user; data.upass = pass; alert(data.uname); alert(data.upass); var json_data = JSON.stringify(data); alert(json_data); var json_upload = "json_name=" + json_data; var request= new XMLHttpRequest(); request.open("POST", "test-middle.php"); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send(json_upload); }; </script> </body> </html>
這是php頁面上的代碼：
<?php $data = $_POST["json_name"]; var_dump($data); echo $data; ?>
var_dump的結果為NULL。
我需要幫助，以弄清楚為什么我沒有在PHP頁面上接收數據。 如果我發送數據的方式是正確的（不認為是正確的）還是我接收數據的方式是正確的？ 我也嘗試過json_decode()和file_get_content()都導致NULL。 我已經嘗試了好一陣子了，而且還沒那么久。
另外，像警報這樣的額外代碼行也只供我檢查表單數據是否正確/完全通過了JavaScript。
另外，請考慮我的操作過程：獲取表單數據並將其插入對象。 然后使用JSON.stringify（object）。 然后將其發送到PHP頁面。 至於PHP頁面，我只想接收數據並回顯或var_dump數據以檢查是否已接收。
另外，不要使用JQuery。 謝謝，謝謝
編輯1：將json_data更改為json_name。 仍輸出NULL。
1 個解決方案
解決方案1
0 已采納 2018-09-18 19:06:01
編輯：好的，我可以使用它，在您的HTML文件中，您需要更改
<input type="submit" value = "Submit" onclick = "submit_form()">
至
<button onclick="submit_form()">Submit</button>
另外，您的PHP文件正在嘗試返回一些數據，但是您的JavaScript尚未被編程為接受它。
您需要添加request.onreadystatechange部分，以確保在滿足請求后從PHP文件返回信息。 在此功能內，您希望為按下提交后要發生的事情建立流程。
您需要在HTML文件中創建一個元素，以便顯示響應。 我用id='response'創建了<div>元素。 您必須使用該新元素的ID來告訴JavaScript將PHP腳本的響應放在何處。
所以我編輯了HTML文件，使其看起來像這樣：
<!DOCTYPE html>
<html>
<body>
<h2>UserName and Password</h2>
<form ID = "PassUser">
Enter UserName:
<input type="text" id="username" >
Enter Password:
<input type="password" id="password">
<br><br>
<button onclick="submit_form()">Submit</button>
</form>
<div id='response'>
<!-- THIS IS THE RESPONSE -->
</div>
<script>
function submit_form() {
var request = new XMLHttpRequest();
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var data = {};
data.uname = user;
data.upass = pass;
alert(data.uname);
alert(data.upass);
var json_data = JSON.stringify(data);
alert(json_data);
var json_upload = "json_name=" + json_data;
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML = this.responseText;
}
};
request.open("POST", "test-middle.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(json_upload);
}
</script>
</body>
</html>
之后，只要您的PHP文件保存在同一文件夾中，它就應該可以工作。
希望這可以幫助！
如何使用ckeditore使用ajax發送數據？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.