Obwohl der vollständige Name von Ajax asynchrones Javascript und XML ist. Aber derzeit ist die Übergabe von JSON beim Einsatz der Ajax-Technologie zum De-facto-Standard geworden. In diesem Artikel wird hauptsächlich der JSON-Beispielcode für die Ajax-Lieferung vorgestellt. Freunde, die ihn benötigen, können auf die vorherigen Wörter verweisen
Obwohl der vollständige Name von Ajax ist asynchrones Javascript und XML. Aber derzeit ist die Übergabe von JSON beim Einsatz der Ajax-Technologie zum De-facto-Standard geworden. Denn im Vergleich zu XML ist JSON einfach und bequem. In diesem Artikel wird das Beispiel im vorherigen Artikel neu geschrieben, um Daten in JSON
Front-End-Seite
<!-- 前端页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size: 20px;margin: 0;line-height: 1.5;}
select,button,input{font-size: 20px;line-height: 1.5;}
</style>
</head>
<body>
<h2>员工查询</h2>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p>
<h2>员工创建</h2>
<form id="postForm">
<label>请输入员工姓名：</label>
<input type="text" name="name"><br>
<label>请输入员工编号：</label>
<input type="text" name="number"><br>
<label>请输入员工性别：</label>
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" name="job"><br>
<button id="save" type="button">保存</button>
</form>
<p id="createResult"></p>
<script>
/*get*/
//查询
var oSearch = document.getElementById('search');
//get方式添加数据
function addURLParam(url,name,value){
url += (url.indexOf("?") == -1 ? "?" : "&");
url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
oSearch.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('searchResult').innerHTML = data.msg;
}else{
document.getElementById('searchResult').innerHTML = '出现错误：' +data.msg;
}
}else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求
var url = 'service.php';
url = addURLParam(url,'number',document.getElementById('keyword').value);
xhr.open('get',url,true);
xhr.send();
}
/*post*/
//创建
var oSave = document.getElementById('save');
//post方式添加数据
function serialize(form){
var parts = [],field = null,i,len,j,optLen,option,optValue;
for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //fieldset
case "file": //file input
case "submit": //submit button
case "reset": //reset button
case "button": //custom button
break;
case "radio": //radio button
case "checkbox": //checkbox
if (!field.checked){
break;
}
/* falls through */
default:
//don't include form fields without names
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
oSave.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('createResult').innerHTML = data.msg;
}else{
document.getElementById('createResult').innerHTML = '出现错误：'+data.msg;
}
}else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求
xhr.open('post','service.php',true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(serialize(document.getElementById('postForm')));
}
</script>
</body>
</html>Terminal-Seite<🎜 zu übertragen >
<?php
//用于过滤不安全的字符
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//设置页面内容的html编码格式是utf-8
header("Content-Type:application/json;charset=utf-8");
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array(
array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>'总经理'),
array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>'开发工程师'),
array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>'产品经理')
);
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值是否为空
if(!isset($_GET['number']) || empty($_GET['number'])){
echo '{"success":false,"msg":"参数错误"}';
return;
}
global $staff;
$number = test_input($_GET['number']);
$result = '{"success":false,"msg":"没有找到员工"}';
//遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果
foreach($staff as $value){
if($value['number'] == $number){
$result = '{"success":true,"msg":"找到员工：员工编号为' .$value["number"] .'，员工姓名为' .$value["name"] .'，员工性别为' .$value["sex"] .'，员工职位为' .$value["job"] .'"}';
break;
}
}
echo $result;
}
//创建员工
function create(){
//判断信息是否填写完全
if(!isset($_POST['name']) || empty($_POST['name']) ||
!isset($_POST['number']) || empty($_POST['number']) ||
!isset($_POST['sex']) || empty($_POST['sex']) ||
!isset($_POST['job']) || empty($_POST['job'])
){
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
return;
}
echo '{"success":true,"msg":"员工' .test_input($_POST['name']) .'信息保存成功!"}';
}
?>
Ajax-Funktionen und Probleme mit verstümmeltem Code (grafisches Tutorial)
Ajax-basiertes Formular, Datenbild und Daten-Upload
Erläuterung der asynchronen Ajax-Anfragetechnologie
Das obige ist der detaillierte Inhalt vonAjax übergibt JSON-Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
