重点+超详细：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 ...
随机推荐
- Java乔晓松-android中的帧动画FrameByFrame
先看效果后上代码: 动画开始---- 动画切换的界面---- 动画播放完毕后的跳转界面----- 重要的方法: imageView.setBackgroundResource(R.anim.frame ...
- crudandroidandroid——CRUD(在上一篇博客的基础上)
废话就不多说了,开始... 1.Person package com.njupt.sqlite; public class Person { private Integer id; private S ...
- jquery ajax请求成功，数据返回成功，seccess不执行的问题
1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
- Dubbo源码学习--服务是如何发布的
相关文章: Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 ServiceBean ServiceBean 实现ApplicationListener接口监听Conte ...
- 办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia
办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia Q.微信:171922772办理教育部国外学历学位 ...
- delphi用TAdoStoredProc调用存储过程，兼容sql2005、2008、2014的远程事务问题
delphi7写的程序,在sql2000里没问题,调用sql2008.2014里的存储过程时,如果存储过程里操作了大量数据,很容易会莫名其妙的自己撤销掉,但是程序还识别不到,认为还在正常执行.今天尝试 ...
- webstrom30天免费试用期过后如何破解继续使用
之前下了ws 直接就用了 也没有破解 30天过去了 老是提示你 神烦 网上找了一堆注册码什么的 终于发现一个良心网站 http://idea.qinxi1992.cn/ 步骤看下面的图
- c++ 常见问题之 const
const 默认状态下const对象仅在文件内有效,添加extern关键字可以在多个文件共享 const 引用: 可以把引用绑定到const对象上,对常量的引用不能被用作修改它所绑定的对象 const ...
- Linux学习笔记-epoll
#include <sys/epoll.h> epoll是Linux内核的一个系统调用,一种可扩展的I/O事件通知机制,最早在Linux内核2.5.44版本引入. 它的功能是监视多文件描述 ...
- python爬虫---python3.5---eclipse
解析中文会出现\xbe\c8\90\hd........ 这个和你的编码选择有关.如果是解析成html,则需 fout = open('output.html', 'w',encoding='utf- ...