初学Ajax和jQuery
来源:互联网 发布:翻唱 谭咏麟的知不知 编辑:程序博客网 时间:2024/05/21 11:30
以最简单的登陆为例
基本上form是相同的,没做过美工的活真痛苦......
Ajax
创建XMLHttpRequest对象:
function createXMLHttpRequest(){
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
}
获取表单元素值:
var account = document.getElementById("account").value;
var password = document.getElementById("password").value;
var type = document.getElementsByName("type");
//对于radio元素作如下操作取值(应该有更简便方法)
var typeid;
for(var i = 0; i < type.length; i++)
{
if(type[i].checked)
typeid=i;
}
设置post方法向后台传值:
var queryString = "account="+account+"&password="+password+"&type="+typeid+"";
//实验证明路径不处理不行啊- -
var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol+"//"+localObj.host+"/"+contextPath;
var server_context=basePath;
//下面才是重点
xhr.onreadystatechange = handleStateChange;
xhr.open("POST",server_context+"/AjaxLogin",true);
//post方法需要用,否则值传不到后台
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xhr.send(queryString);
//有关的JavaScript处理函数
function handleStateChange(){
if(xhr.readyState == 4){
if(xhr.status == 200){
parseResults();
}
}
}
function parseResults(){
var responseDiv = document.getElementById("serveResponse");
responseDiv.innerHTML = xhr.responseText;
}
jQuery
有关jQuery的引入,在这里吃过亏
//务必注意"../"表示的是你的webroot目录
目前我的理解jQuery就是对Ajax的简化,故只写他的简化函数
获取元素值:
var account = $("#account").val();
var password = $("#password").val();
var typeid = $("input[@type=radio][checked]").val();
//post方法目前还有问题
$.post(server_context+"/AjaxLogin",queryString,
function(data){
$("#serveResponse").html(decodeURI(data))}
)
基本的servlet的web.xml文件配置就不用多说了吧~
后台用out.print();来输出response信息
- 初学Ajax和jQuery
- 初学jQuery ajax
- 初学AJAX4---使用jquery实现ajax
- JavaScript和JQuery初学对比
- JavaScript Ajax和jQuery Ajax
- Ajax和JQuery的$.ajax
- Jquery validate 和Jquery Ajax
- jquery和ajax
- AJAX 和 jQuery
- jquery ajax 和 asp
- AJAX 和 jQuery
- jQuery和Ajax
- AJAX和Jquery区别
- jQuery和AJAX
- Jquery和ajax笔记
- ajax和jquery
- 08-jQuery和ajax
- jQuery和AJAX基础
- struts和hibernate整合的一种方式(hibernate作为struts插件) 选择自 killme2008 的 Blog
- 用JS在IE和火狐下判断网页是刷新还是关闭
- session
- Ajax局部刷新div后如何跳出进行全局刷新
- struts1学习
- 初学Ajax和jQuery
- NetBeans中有关swing的学习
- jbpm流程发布问题
- 有关流程发布的问题
- 【转】javamail-基于SMTP的JAVA邮件发送程序!
- Oracle学习
- 向MyEclipse中添加插件如JBoss
- Windows下安装Oracle 10g网络配置检查未执行的问题
- 安装