重点+超详细：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 ...
随机推荐
- [置顶] Oracle学习经验谈
经常遇到朋友问oracle学习难不难,怎么才能成为高手等等,我想结合我的个人经验简单说几点: 1.打好基础,由浅入深 学习Oracle不能急于求成,寄希望于一天成为一个大侠.学习有个过程,应该由浅入深 ...
- ASP.Net MVC C#画图 页面调用
/////C# 后台代码 public FileContentResult PieChart() { TransactionStatisticsBLL bll = ...
- C语言之算数运算符
一 什么是算数运算符 算术运算符: +: 就是把两个数据相加,得到和 -: 就是把两个数据相减,得到差 *: 就是把两个数据相乘,得到积 /: 就是把两个数据相除,得到商 %: 就是把两个数 ...
- 部署 instance 到 OVS vlan100 - 每天5分钟玩转 OpenStack（138）
上一节创建了 OVS vlan network vlan100,今天部署 instance 到该网络.launch 新的 instance “cirros-vm1”,网络选择 vlan100. cir ...
- js面向对象小结（工厂模式，构造函数，原型方法，继承）
最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...
- BootStrap的菜单的快速创建
在bootstrap的3.0版本及以上时,菜单的创建有所改变. 现在,我们只需记住3个类 dropdown open dropdown-menu. 前两个是为ul 列表的父元素用的,最后一个是给ul ...
- .NET并行与多线程学习系列一
并行与多线程学习系列一 一.并行初试: public static void test() { ; i < ; i++) { Console.WriteLine(i); } } public s ...
- hibernate-部分字段查询方案
hibernate的延迟加载与本列记录不一样,延迟加载正常一般用于关联字段,或者大型字段使用. 本列的情况主要用于,某一张表有几十甚至上百个字段,例如财务报表等.但是在使用某些场景是却大多只是用其10 ...
- 在VirtualBox上安装CentOS7
文章的出处:http://jingyan.baidu.com/article/9c69d48f8ec01613c8024e58.html 工具: VirtualBox-5.1.2-108956-Win ...
- Attribute value is quoted with " which must be escaped when used within the value 问题解决
访问JSP时,报错:Attribute value is quoted with " which must be escaped when used within the value .相信 ...