您的位置：首页 > Web前端 > JavaScript

Javascript 使用Ajax

2016-01-28 23:38 639 查看

基本步骤

GET方式

1. 定义XMLHttpRequest对象

var request = new XMLHttpRequest();

2. 使用GET方式打开服务器地址

request.open("GET","server.php?id="+document.getElementById("keyword").value);

3. 发起GET请求

request.send();

4. 监听服务器的操作状态，并做出响应

request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
document.getElementById("searchRes").innerHTML = request.responseText;
}else{
document.getElementById("searchRes").innerHTML = "发生错误："+request.status;
}
}
}

POST方式

1. 定义XMLHttpRequest对象

var request = new XMLHttpRequest();

2. 使用POST方式打开服务器地址

request.open("POST","server.php");

3. 定义需要传递的数据

var data = "id="+document.getElementById("id").value+"&name="+document.getElementById("name").value+"&job="+document.getElementById("job").value;

4. 设置请求头

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5. 发起POST请求（发送数据）

request.send(data);

6. 监听服务器的操作状态，并做出响应

request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
document.getElementById("addRes").innerHTML = request.responseText;
}else{
document.getElementById("addRes").innerHTML = "发生错误："+request.status;
}
}
}

操作实例

XMLHttpRequest.html

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>XMLHttpRequest</title>
<style type="text/css">
*{
font-size:25px;
line-height:1.8;
}
</style>
</head>
<body>

<h1>查询员工</h1>
员工编号：<input type="text" id="keyword"/>
<input type="button" id="search" value="查询"/><br/>
<p id="searchRes"></p>

<h1>添加员工</h1>
员工编号：<input type="text" id="id"/><br/>
员工姓名：<input type="text" id="name"/><br/>
员工职位：<input type="text" id="job"/><br/>
<input type="button" id="add" value="添加"/><br/>
<p id="addRes"></p>

<script>
//查询员工
document.getElementById("search").onclick = function(){
var request = new XMLHttpRequest();
request.open("GET","server.php?id="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
document.getElementById("searchRes").innerHTML = request.responseText;
}else{
document.getElementById("searchRes").innerHTML = "发生错误："+request.status;
}
}
}
}
//添加员工
document.getElementById("add").onclick = function(){
var request = new XMLHttpRequest();
request.open("POST","server.php");
var data = "id="+document.getElementById("id").value+"&name="+document.getElementById("name").value+"&job="+document.getElementById("job").value;
alert(data);
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("addRes").innerHTML = request.responseText;
}else{
document.getElementById("addRes").innerHTML = "发生错误："+request.status;
}
}
}
}
</script>
</body>
</html>

server.php

<?php
header("Content-Type:text/plain;charset=utf-8");

if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"] == "POST"){
add();
}

function search(){
//判断职工编号是否正确填写
if(!isset($_GET["id"]) || empty($_GET["id"])){
echo "参数错误";
return;
}
$id = $_GET["id"];
$result = "没有找到员工";

$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "SELECT * FROM staff WHERE id=".$id;
$res = $mysqli->query($sql);
$row = $res->fetch_assoc();

if(is_array($row) && $row['id']==$id){
$result = "找到员工<br/>员工编号：".$id."，员工姓名：".$row['name']."，员工职位：".$row['job'];
}
echo $result;
$mysqli->close();
}

function add(){
//判断信息是否填写完整
if(isset($_POST["id"])&&isset($_POST["name"])&&isset($_POST["job"])&&!empty($_POST["id"])&&!empty($_POST["name"])&&!empty($_POST["job"])){
$id = $_POST["id"];
$name = $_POST["name"];
$job = $_POST["job"];
$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "INSERT INTO staff(id,name,job) VALUES ($id,'$name','$job')";
$result = $mysqli->query($sql);
if($result==true){
echo "添加员工操作成功";
}
$mysqli->close();
}else{
echo "参数错误，信息填写不完整";
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航