分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

ajax接受json响应

发布时间:2023-09-06 01:26责任编辑:赖小花关键词:jsjson

一、显示页面(ajax_xml.html

body部分

<!-- 支持多选的列表框 --><select name="first" id="first" size="5" multiple="multiple"> ???<option value="1" selected="selected">中国</option> ???<option value="2">美国</option> ???<option value="3">日本</option></select><!-- 用于发送Ajax请求的按钮 --><input type="button" value="发送" onClick="send();" /><!-- 被级联改变的列表框 --><select name="second" id="second" size="5" ></select>

需要注意的是:multiple="multiple"

size:表示选择框的宽度
multiple="multiple":表示允许多选
<script>部分:
1.XHR对象定义
2.数据封装
3.数据发送到服务器
4.处理服务器的响应
(1)XHR対象定义
// 定义了XMLHttpRequest对象 ???????var xmlrequest; ???????// 完成XMLHttpRequest对象的初始化 ???????function createXMLHttpRequest() { ???????????if (window.XMLHttpRequest) { ???????????????// DOM 2浏览器 ???????????????xmlrequest = new XMLHttpRequest(); ???????????} else if (window.ActiveXObject) { ???????????????// IE浏览器 ???????????????try { ???????????????????xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); ???????????????} catch (e) { ???????????????????try { ???????????????????????xmlrequest = new ActiveXObject("Microsoft.XMLHTTP"); ???????????????????} catch (e) { ???????????????????} ???????????????} ???????????} ???????}

(2)数据发送

1.初始化xhr对象

2.打开与服务器连接(定义发送到的地址)

// 事件处理函数,当下拉列表选择改变时,触发该事件 ???????function change(id) { ???????????// 初始化XMLHttpRequest对象 ???????????createXMLHttpRequest(); ???????????// 设置请求响应的URL ???????????var uri = "../jsp/second.jsp" ???????????// 设置处理响应的回调函数 ???????????xmlrequest.onreadystatechange = processResponse; ???????????// 设置以POST方式发送请求,并打开连接 ???????????xmlrequest.open("POST", uri, true); ???????????// 设置POST请求的请求头 ???????????xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ???????????// 发送请求 ???????????xmlrequest.send("id=" + id); ???????}

(3)处理服务器的响应

// 定义处理响应的回调函数 ???????function processResponse() { ???????????// 响应完成且响应正常 ???????????if (xmlrequest.readyState == 4) { ???????????????if (xmlrequest.status == 200) { ???????????????????// 获取页面表格体内容 ???????????????????var bookTb = document.getElementById("book"); ???????????????????// 删除bookTb原有的所有行 ???????????????????while (bookTb.rows.length > 0) { ???????????????????????bookTb.deleteRow(bookTb.rows.length - 1); ???????????????????} ????????????????????// 获取服务器的JSON响应 ???????????????????// 并调用eval()函数将服务器响应解析成JavaScript数组 ???????????????????var books = eval(xmlrequest.responseText); ???????????????????// 遍历数组,每个数组元素生成一个表格行 ???????????????????for (var i = 0 , len = books.length ; i < len ; i++){ ?????????????????????var tr = bookTb.insertRow(i); ???????????????????????// 依次创建4个单元格,并为单元格设置内容 ???????????????????????var cell0 = tr.insertCell(0); ???????????????????????cell0.innerHTML = books[i].id; ???????????????????????var cell1 = tr.insertCell(1); ???????????????????????cell1.innerHTML = books[i].name; ???????????????????????var cell2 = tr.insertCell(2); ???????????????????????cell2.innerHTML = books[i].author; ???????????????????????var cell3 = tr.insertCell(3); ???????????????????????cell3.innerHTML = books[i].price; ?????????????????????} ???????????????} else { ???????????????????//页面不正常 ???????????????????window.alert("您所请求的页面有异常。"); ???????????????} ???????????} ???????}

(4)调用数据发送函数(开始数据)

document.body.onload = change(document.getElementById("category").value);


ajax接受json响应

原文地址:http://www.cnblogs.com/excellencesy/p/7881077.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved