所以我在 php 数组中有一个默认值数组，该文件(backend.php)具有多个功能和行为。我只想使用 act="default"来定位数组。我需要获取编码的 json php 数组并用它填充和 html 表单。
html 页面 - frontend.html
<html>
<head>
</head>
<body>
<h1>Form Validation</h1>
<form id="PersonForm">
Name:
<input id="name" type ="text" name="name"></input>
<br><br>
Postal Code:
<input id="postal" type ="text" name="postal"></input>
<br><br>
Phone Number:
<input id="phone" type ="text" name="phone"></input>
<br><br>
Address:
<input id="address" type ="text" name="address"></input>
<br><br>
<input type="submit"></input>
</form>
<div id= "content"></div>
<a href="frontend.html">Refresh</a>
<a id="InsertDefault" href="#">Insert Default Data</a>
<br><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 src="main.js" type="text/javascript"></script>
</body>
</html>
php页面-backend.php
<?php
if ($_REQUEST['act'] == 'default'){
$defaultData = array(
'name' => "Jane",
'postal' => "L5B4G6",
'phone' => "9055751212",
'address' => "135 Fennel Street"
);
echo json_encode($defaultData);
}
else if...
?>
main.js 页面(此处有错误)
$(document).ready(function()
{
$("#InsertDefault").click(function()
{
// make an AJAX call here, and place results into the form
$(document).ready(function(){
$('#content').load('backend.php', {'default':'defaultData'}, //this format
function (){ $('#content').html('these are the default values')}
);
// prevents link click default behaviour
defaultData.preventDefault();
return false;
});
$("#PersonForm").submit(function()
{
// Clear any success or error messages
$("#success").html("");
$("#errors").empty();
// make an AJAX call here, and set error or success accordingly
// prevents submit button default behaviour
return false;
});
});
最佳答案
不要使用 .load ，而是使用 $.ajax 或 $.post 因为 $.load 将设置所选返回数据的内容(应该是文本或 HTML)。在您的情况下，您希望返回 json 以便您可以设置表单元素值。
$(document).ready(function()
{
$("#InsertDefault").click(function(e)
{
// prevents link click default behaviour
e.preventDefault();
// make an AJAX call here, and place results into the form
$.ajax({
url: 'backend.php',
type: 'post',
data: {
act:'default'
},
dataType: 'json',
success: function(data) {
// set the form values
$('[name=name]').val(data.name);
$('[name=postal]').val(data.postal);
$('[name=phone]').val(data.phone);
$('[name=address]').val(data.address);
// display message
$('#content').html('Fields filled in with default values');
},
error: function() {
// handle your error
console.log('error');
}
});
return false;
});
$("#PersonForm").submit(function()
{
// Clear any success or error messages
$("#success").html("");
$("#errors").empty();
// make an AJAX call here, and set error or success accordingly
// prevents submit button default behaviour
return false;
});
});
由于您的 AJAX 调用需要 json 返回，因此您需要在 php 脚本中使用 header('Content-Type: application/json'); 来设置数据类型。
使用输出缓冲也是一个好主意(请参阅下面的 ob_start() 和 ob_clean())，这样 php 输出的任何通知都不会弄脏您的 json正在等待 AJAX 调用。
ob_start();
if (isset($_POST['act']))
{
if ($_POST['act'] == 'default')
{
ob_clean();
header('Content-Type: application/json');
$defaultData = array(
'name' => "Jane",
'postal' => "L5B4G6",
'phone' => "9055751212",
'address' => "135 Fennel Street"
);
echo json_encode($defaultData);
exit();
}
}
关于javascript - AJAX 调用 PHP 数组 - 使用 jQuery/JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34144443/