無法使AJAX和PHP工作
[英]Can't get AJAX and PHP working
問題描述
所以這是場景：
我有HTML，JS和PHP文件。 PHP文件內是一組默認值的關聯數組，用於填充HTML文件上的各種表單元素。 我正在嘗試使用AJAX從PHP文件中獲取文件，並將其放入相應的表單元素中。 但是什么都沒有工作.....
以下是相應文件的代碼。 任何幫助弄清楚這一點非常感謝:)
HTML
<html>
<body>
<h1>Form Validation</h1>
<form id="PersonForm">
Name: <input type="text" id="name" name="name"> <br>
Postal Code: <input type="text" id="postal" name="postal"> <br>
Phone Number: <input type="text" id="phone" name="phone"> <br>
Address: <input type="text" id="address" name="address"> <br>
<input type="submit">
</form>
<a href="frontend.html">Refresh</a>
<a id="InsertDefault" href="">Insert Default Data</a>
<br>
<ul id="errors"></ul>
<p id="success"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
PHP
<?php
// Return JSON default data if requested
if ($_REQUEST['act'] == 'default')
{
$defaultData = array('name' => "Jane",
'postal' => "L5B4G6",
'phone' => "9055751212",
'address' => "135 Fennel Street");
echo json_encode($defaultData);
}
?>
JAVASCRIPT
$(document).ready(function()
{
$("#InsertDefault").click(function()
{
// make an AJAX call here, and place results into the form
$.post('backend.phps',
{ act: 'default' },
function(data) {
for (var key in data) {
document.getElementById(key).value = data[key] }
},
'json');
// prevents link click default behaviour
return false;
});
});
附帶說明一下，我總是在處理Web開發方面的問題，因為我不知道如何正確調試正在做的事情。 如果有人對調試Web代碼有什么有用的技巧/工具有任何提示，我也很樂意對此有所投入。
謝謝你的時間。
2 個解決方案
解決方案1
0 2016-12-08 22:49:57
對於ajax代碼請求，請使用：
$("#InsertDefault").click(function(){
$.ajax({
type: "POST",
url: "backend.phps",
data: "act=default&name=test&phone=test", //Something like this
success: funtion(msg){
console.log(msg);
},
beforeSend:function(dd){
console.log(dd)
}
});
});
並在您的backend.php文件中
if ($_REQUEST['act'] == 'default'){
//echo $_REQUEST['name'];
}
為了進行簡單的調試，請使用瀏覽器的控制台，右鍵單擊頁面，然后單擊檢查元素 。 （簡單）您也可以在Mozilla Firefox上安裝Firebug擴展，然后右鍵單擊該頁面，然后單擊inspect帶Firebug的元素 。 之后，單擊那里的“ 控制台”選項卡。
這些是簡單ajax請求的基本和簡單調試。
解決方案2
0 2016-12-08 22:53:44
根據最新的Ajax文檔，您的ajax應該包括Success和Failure回調，您可以在其中處理從PHP發送來的響應。
這應該與您現有的PHP文件一起使用。
阿賈克斯
$(document).ready(function () {
//look for some kind of click below
$(document).on('click', '#InsertDefault', function (event) {
$.ajax({
url: "/backend.phps",
type: 'POST',
cache: false,
data: {act: 'default'},
dataType: 'json',
success: function (output, text, error)
{
for (var key in output.defaultData) {
document.getElementById(key).value = data[key]
}
},
error: function (jqXHR, textStatus, errorThrown)
{
//Error handling for potential issues.
alert(textStatus + errorThrown + jqXHR);
}
})
})
preventDefault(event);
});
CakePHP無法使Ajax GET工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.