重点+超详细：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 ...
随机推荐
- sharepoint 使用命令行注册dll文件到gac的方法
使用命令行注册dll文件到gac的方法: gacutil.exe -i D:\SPFormLoginProject.dll 删除gac的dll方法: gacutil /u "SPFormLo ...
- 理解Javascript的状态容器Redux
Redux要解决什么问题? 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据. ...
- OpenCV示例学习笔记（1）-contours2.cpp-通过findContours 函数实现轮廓提取
这个系列的目的是通过对OpenCV示例,进一步了解OpenCV函数的使用,不涉及具体原理. 示例代码地址:http://docs.opencv.org/3.0.0/examples.html(安装op ...
- C#中常用关键字的作用
***new关键字:1.在堆中开辟空间 2.在开辟的空间中创建对象 3.调用对象的构造函数***this关键字:1.代表当前类的对象 2.调用自己的构造函数 ***return:1.立即结束本次方法2 ...
- Dubbo源码学习--注册中心分析
相关文章: Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 注册中心 关于注册中心,Dubbo提供了多个实现方式,有比较成熟的使用zookeeper 和 redis 的 ...
- How to use dt.Rows.Cast<System.Data.DataRow>().Take(n)
参考文章:http://stackoverflow.com/questions/2787458/how-to-select-top-n-rows-from-a-datatable-dataview-i ...
- 解决了IE8不支持数组的indexOf方法
ie在过去给我们添了很多坑. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/ ) { ...
- 词典 (noi OpenJudge)
传送门:1806:词典 神奇的STL #include <iostream> #include <cstdio> #include <cstring> #inclu ...
- CrashMe分析教程1 - BreakPoint
首先,谢谢 Robert Kuster 为我们提供了这么好的CrashMe项目. 很多人想寻找一个CrashMe分析的教程, 我也想要, 但是似乎网络里没有, 所以我就决定用业余时间写一个小系列来共享 ...
- python第五天
反射 hasattr,getattr class Foo: static_name = 'nba' def __init__(self): self.name = 'alex' def show(se ...