ajax全接触
Posted 简单就好zyx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax全接触相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
编号：
<input type="text" id="keyword">
<button id="search">查询</button>
<br/>
<form>
<label>姓名：</label>
<input id="staffName" type="text" />
<label>职位：</label>
<input type="text" id="staffJob" />
<input type="button" id="searchResult" value="保存">
</form>
<script type="text/javascript">
//get
document.getElementById(‘search‘).onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open(‘GET‘,‘service.php?number+document.getElementById("keyword").value‘);
request.send();
request.onreadystatechange=function(){
if(request.readyState ===4){
if(request.status ===200){
document.getElementById(‘searchResult‘).innerHTML =request.responseText;
}else{
alert(‘发生错误：‘+request.status);
}
}
}
}
//post
document.getElementById(‘save‘).onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open(‘POST‘,‘service.php‘);
var data="name="+document.getElementById("staffName").value+"job="+document.getElementById("staffJob").value;
request.setRequestHeader(‘Content-Type‘,"application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState ===4){
if(request.status ===200){
document.getElementById(‘createResult‘).innerHTML =request.responseText;
}else{
alert(‘发生错误：‘+request.status);
}
}
}
}
</script>
<!-- json -->
{
"staff":[
{"name":"红旗","age":70},
{"name":"郭靖","age":35}
]
}
<!--
eval()
JSON.parse()
-->
<!-- 服務器端application/json; -->
<script type="text/javascript">
//get
document.getElementById(‘search‘).onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open(‘GET‘,‘service.php?number+document.getElementById("keyword").value‘);
request.send();
request.onreadystatechange=function(){
if(request.readyState ===4){
if(request.status ===200){
var data =JSON.parse(request.responseText);
if(data.success){
document.getElementById(‘searchResult‘).innerHTML =data.msg;
}else{
document.getElementById(‘searchResult‘).innerHTML ="出現錯誤"+data.msg;
}
}else{
alert(‘发生错误：‘+request.status);
}
}
}
}
//post
document.getElementById(‘save‘).onclick=function(){
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open(‘POST‘,‘service.php‘);
var data="name="+document.getElementById("staffName").value+"job="+document.getElementById("staffJob").value;
request.setRequestHeader(‘Content-Type‘,"application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState ===4){
if(request.status ===200){
var data =JSON.parse(request.responseText);
if(data.success){
document.getElementById(‘creatResult‘).innerHTML =data.msg;
}else{
document.getElementById(‘creatResult‘).innerHTML ="出現錯誤"+data.msg;
}
}else{
alert(‘发生错误：‘+request.status);
}
}
}
}
</script>
<!-- jquery實現Ajax -->
type:post get
url:
data:
dataType
success
error
<script type="text/javascript">
//发送Ajax查询请求并处理 jquery
//先引用jquery庫
//
$(document).ready(function(){
//get
$("#search").click(function () {
$.ajax({
type:"GET",
url："service.php?number="+$("#keyword").val(),
dataType:"json",
success:function(){
if(data.success){
$(‘#searchResult‘).html(data.msg);
}else{
$(‘#searchResult‘).html("出現錯誤"+data.msg);
}
},
error:function(jqXHR){
alert(‘发生错误：‘+jqXHR.status);
}
})
})
//post
$("#save").click(function () {
$.ajax({
type:"POST",
url："service.php",
dataType:"json",
data:{
name:$(‘#searchResult‘).val(),
job:$(‘#searchJob‘).val(),
}
success:function(){
if(data.success){
$(‘#searchResult‘).html(data.msg);
}else{
$(‘#searchResult‘).html("出現錯誤"+data.msg);
}
},
error:function(jqXHR){
alert(‘发生错误：‘+jqXHR.status);
}
})
})
});
</script>
</body>
</html>
以上是关于ajax全接触的主要内容，如果未能解决你的问题，请参考以下文章