ホームページ > 記事 > ウェブフロントエンド > Ajax は JSON サンプルコードを渡します
ajax の正式名は、非同期 JavaScript および XML です。しかし現在、ajax テクノロジーを使用する場合、JSON を渡すことが事実上の標準になっています。この記事では主に Ajax 配信 JSON サンプル コードを紹介します。必要な方は前の言葉を参照してください
ajax の正式名は非同期 JavaScript および XML です。しかし現在、ajax テクノロジーを使用する場合、JSON を渡すことが事実上の標準になっています。 XML に比べて JSON はシンプルで便利だからです。この記事では、前の記事の例を JSON 形式でデータを転送するように書き直しました
フロントエンドページ
<!-- 前端页面 -->
<!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>
バックエンドページ
<?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の特徴とコード化けの問題(グラフィックチュートリアル)AjaxをベースにしたformData画像とデータアップロード
以上がAjax は JSON サンプルコードを渡しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。