重点+超详细：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 ...
随机推荐
- RSA算法优化
RSA算法优化 大数乘法 模乗优化 剩余定理(孙子定理) RSA加解密 python的RSA计算优化 #-*- coding: utf-8 -*- ''' /********************* ...
- python 变量命名规则
变量命名: 1.语法: (下划线或字母)+(任意数目的字母.数字或下划线) 变量名必须以下划线或字母开头,而后面接任意数目的字母.数字或下划线. 区分大小写: SPAM和spam不同 禁止使用保留 ...
- C语言之算数运算符
一 什么是算数运算符 算术运算符: +: 就是把两个数据相加,得到和 -: 就是把两个数据相减,得到差 *: 就是把两个数据相乘,得到积 /: 就是把两个数据相除,得到商 %: 就是把两个数 ...
- 【C#】Get the html code of a webpage
As for the title,the console program will show you a sample which can get the webpage-code.Enjoy it: ...
- springmvc中返回页面，只在iframe中跳转，而不是整个页面，解决方法。
问题描述:在我写的主页面中用到了iframe,其中在iframe中有一个button点击提交,然后在Controller中返回页面的时候,是在iframe中打开的,而不是整个页面. 最开始我想用aja ...
- Form 提交表单
---HTML <form action="/Sample/SampleList/ExportSample" style="display:inline" ...
- 抓包分析SIP消息
I. 实验环境 SIP服务器: Yate服务器, IP:port=10.15.3.34:5060 SIP客户端: 移植Sipdroid的Android网络电话软件, IP: 10.15.3.73, A ...
- C# 无边框窗口实现拖动
原文地址:http://blog.csdn.net/sky___ice/article/details/11533321 Form1.Designer.cs: // //Form1 // this.M ...
- jquery插件autoComplete自动弹出
导入 <link rel="stylesheet" href="${ctx }/static/plugins/jQuery-autoComplete-master/ ...
- DrawingCombiner——CAD图纸批量合并软件
DrawingCombiner是一款CAD图纸批量合并软件,可以批量合并多个dwg或dxf文件为单个dwg文件,并可以设置合并后的排列方式. 此程序附属MagicTable(可到依云官网下载:http ...