重点+超详细：ajax和json及案例
不用jQuery的ajax流程
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script>
/*
* 1.大致的流程
* * 创建核心对象
* * 绑定一个函数
* * 打开和服务端连接
* * 发送数据
* * 处理函数 成本的付出
* 2.核心对象的5种状态分别代表的含义
*/
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function fn(){
//1.创建对象
var xmlHttpRequest=GetXmlHttpObject();
//2.绑定函数
xmlHttpRequest.onreadystatechange=fm;
//3.打开
xmlHttpRequest.open("get","test.jsp",true);
//4.发送
xmlHttpRequest.send();
//5.处理绑定函数
function fm(){
if (xmlHttpRequest.readyState==4)
{
if (xmlHttpRequest.status==200)
{
document.getElementById('dv').innerHTML=xmlHttpRequest.responseText;
}
else
{
alert("Problem retrieving data:" + xmlHttpRequest.statusText);
}
}
} }
</script>
<body>
<button onclick="fn()">按钮</button>
<div id="dv"></div>
</body>
</html>
test.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
out.println("AAAAAA");
%>
基于jQuery的ajax
xml格式的数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
//获取id是username和content的值，回调函数dt的值是返回的数据
$.post("demo2.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){
//alert(dt);
//保证第一行的XML数据没有空行
var um=$(dt).find("comments comment").attr("username");
var con=$(dt).find("comments content").text();
$("#resText").html(um+" "+con);
},"xml");
});
});
</script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form> <div class='comment'>已有评论：</div>
<div id="resText" >
</div> </body>
</html>
demo2.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
//注意空行问题
String username = request.getParameter("username");
String content = request.getParameter("content");
response.setContentType("text/xml");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
%>
json格式的数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
//$.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){
// 将JSON格式的字符串转换为JS对象
// var dd=eval("("+dt+")")
// alert(dd.username);
//alert(dd.content);
//}); $.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){ alert(dt);
$("#resText").html(dt.username+" "+dt.content);
},"json");
});
}); </script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div id="resText" >
</div>
</body>
</html>
demo3.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
String username = request.getParameter("username");
String content = request.getParameter("content");
System.out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");
out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");
%>
这是我之前项目中总用到的类型，重点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
/*
* $.ajax({url:'',data:{},type:'',dataType:'json',success:function(dt){},error:function(){}});
*/
$("#send").click(function(){
//$.ajax(); ==> $.ajax({}); ===>$.ajax({k1:v1,k2:v2,k3:v3.....});
$.ajax({
//请求的路径
url:'demo.jsp',
//发送到服务端的数据
data:{username:$("#username").val(),content:$("#content").val()},
//请求的类型
type:'post',
//响应回的数据 格式
dataType:'json',
//成功之后处理的函数
success:function(dt){
//alert(dt);
$("#resText").html(dt.username+" "+dt.content);
},
//失败之后处理的函数
error:function(){
alert("Fail");
}
});
});
})
</script>
</head>
<body>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>
</body>
</html>
demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
String username = request.getParameter("username");
String content = request.getParameter("content");
out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");
%>
重点+超详细：ajax和json及案例的更多相关文章
- ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...
- jQuery实例之ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...
- ajax接受json响应（讲义）
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- ajax接收json
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- Ajax接收json响应
json? Json和xml比较 Ajax如何使用JSON Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...
- GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）
GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结 一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...
- python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
随机推荐
- Android call setting 源码分析 （上）
Android 的 call setting 是用来设定与 simcard 相关的一些内容的应用程序,如网络,PIN等等,算是AP层.这里就选择其中一个项从源代码读下去直到底层,看看大概的结构和流程. ...
- java获取登陆用户的IP地址
/** * 通过HttpServletRequest返回IP地址 * @param request HttpServletRequest * @return ip String * @throws E ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- html&css入门详解
本系列主要讲解html与css的知识点,因为是参考的英文版的<html&css design and build websites>,所以可能会有个人翻译理解上的差错,希望观者能够 ...
- JavaWeb开发中的乱码问题
一,获取系统平台的默认编码 获取系统平台的默认编码: String encoding=System.getProperty("file.encoding"); 注:至于UTF-8编 ...
- OpenCV备忘
都是转来的内容的,算是整理一下 OpenCV备忘 深度和通道的理解 CV_8UC1 是指一个8位无符号整型单通道矩阵, CV_32FC2是指一个32位浮点型双通道矩阵 CV_8UC1 CV_8SC1 ...
- TypeScript 学习四 面向对象的特性，泛型，接口，模块，类型定义文件*.d.ts
1,面向对象的特性一:类,继承,见上一篇博客: 2,面向对象的特性二: 泛型(generic):参数化的类型,一般用来限制集合的内容:指定只能放某个类型的元素 如下图中的尖括号中的Person,就代表 ...
- HDU 2045 不容易系列之(3)—— LELE的RPG难题(递归/动态规划)
不容易系列之(3)—— LELE的RPG难题 Problem Description 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即" ...
- [其他]Android SDK离线文件路径以及安装更新方法
一.离线安装Android SDK文件路径 转载自:http://www.oschina.net/code/snippet_1539302_45940 Google TV Addon, Android ...
- C#函数以及应用