jQuery与Ajax实践
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//选取td的文本内容中包含+的标签
$("td:contains('+')").css("background","blue");
//选取包含a标签的td标签
$("td:has(a)").css("background","pink");
//当提交按钮点击后触发的函数
$(":submit").click(function(){
//选取id id有特殊字符转义
//$("#id#2")-->$("#id\\#2")
//$("#id\\#2").html("这是#id#2的文本内容");
//属性选择器的话就不用转义
//$("[id='id#2']").html("这是#id#2的文本内容");
//$("#id[2]")-->$("#id\\[2\\]")
//修改标签的属性
$("img").attr("width","150");
//得到value属性的值
alert($("ul li:eq(1)").attr("value"));
//判断属性为text的标签的value属性的值长度为0的话
// if($(":text").val().length==0){
// alert('username为空')
// };
//判断属性为password的标签中的最后一个标签的value属性的值长度为0的话
// if($(":password:last").val().length==0){
// alert('确认密码都为空')
// }
//只有属性为text,password的标签 判断需要.val()才能得到文本能容 其它的不需要加入.val()
//判断属性为radio的标签中属性为checked选中状态的标签的value属性的值不为0的话
if($(":radio:checked").length!=0){
alert($(":radio:checked").val())
};
if($(":checkbox:checked").length!=0){
alert($(":checkbox:checked").val())
};
//判断选中下拉框一栏的value属性的值不等于""的话
if($(":selected").val()!=""){
alert($(":selected").val())
}
});
});
//javascript语法 当窗体加载时
// window.onload=function(){
//得到元素id为username的标签 加上标签中的style的background背景颜色的值 并且alert弹窗
// var box1=document.getElementById("username");
// var box2="username:"+box1.style.background;
// alert(box2);
//通过定义的标签变量可以直接修改标签中属性的值 下面是修改style样式属性中的背景颜色和value属性的语法
// box1.style.background="blue";
// box1.value="456";
// }
</script>
<style type="text/css">
.c{ color:red;}
</style>
</head>
<body>
<form method="post">
姓名:<input type="text" name="username" value="2"/><br/>
密码:<input type="password" name="pwd"/><br/>
确认密码:<input type="password" name="querenpwd" /><br/>
性别:<input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="2"/>女 <br/>
爱好:<input type="checkbox" name="hobby" value="1"/>篮球 <input type="checkbox" name="hobby" value="2"/>足球 <input type="checkbox" name="hobby" value="3"/>羽毛球 <br/>
省份:<select>
<option value="">请选择</option>
<option value="yunnan">云南</option>
<option value="wuhan">武汉</option>
<option value="changsha">长沙</option>
</select> <br/>
<input type="submit"/><br/>
</form>
<table>
<tr>
<td><a href="#">123</a></td>
<td>456</td>
<td>245+</td>
</tr>
</table>
</body>
</html>
json(javascript object notation) 取值的方法
<script type="text/javascript">
var stu={ "id":3,"name":"张三","age":23 };
var cls={ "no":2,"stus":[
{ "id":3,"name":"张三","age":23 },
{ "id":4,"name":"里四","age":24 }
],
"date":"2017-10-26"
}
alert(cls.stus[1].name);
</script>
<style type="text/css">
.c{ color:red;}
</style>
$(document).ready(function(e) {
$("input[name='search']").focus(function(){
if($(this).val()=='输入关键字'){
$(this).val("");
}
}).blur(function(){
if($(this).val()==''){
$(this).val('输入关键字');
}
});
//插入子节点
var newli=$("<td>小葫芦</td>");
//$("td:eq(0)").before(newli);
newli.insertAfter($("td:eq(1)"));
alert($("input").attr("name"));
//移除属性
$("input").removeAttr("name");
alert($("input").attr("name"));
//删除元素
//$("td:eq(0)").remove();
//在标签最前面加入
//$("tr").prepend(newli);
//追加在所有td中最后一个
//$("tr").append(newli);
//newli.prependTo($("tr"));
//newli.appendTo($("tr"));
});
//同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
//异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
readyState==0 对象创建了没初始化，在open前
readyState==1 open()后还没send()，请求未发送
readyState==2 调用send()请求已发送
readyState==3 正在处理响应，在接收数据的过程中
readyState==4 响应完,数据接收完
onreadystatuschange 处理服务器响应的函数
status 状态码 500,404,200
xmlHttpRequest.responseText 获取字符串形式的响应数据
xmlHttpRequest.responseXML 获取XML形式的响应数据
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
xmlHttpRequest.open("POST",url,true)
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(参数信息);
----------
<script type="text/javascript">
//创建XMLHttpRequest对象
var xmlHttp=false;
function createXMLHttpRequest(){
if(window.ActiveXObject){//IE浏览器
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}else if(window.XMLHttpRequest){//其他浏览器，如firefox
xmlHttp=new XMLHttpRequest();
if(xmlHttp.overrideMimeType){//火狐旧版会报错 添此判断
xmlHttp.overrideMimeType("text/html");
}
}
}
function processResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.readyState==200){//返回状态200，处理完成
var info = xmlHttp.responseText;
alert(info);
if(info=="对不起，该用户已存在"){
document.getElementById("username").value="";
document.getElementById("username").focus();
}
}else{
alert("你所请求的页面有异常");
}
}else{
}
}
function sendRequest(url){
createXMLHttpRequest();
xmlHttp.open("GET",url,true);//true为异步发送 false为同步
xmlHttp.onreadystatechange=processRequest;//回调函数 ，有数据调用processRequest方法
xmlHttp.send(null);
}
function selectUserName(){
var val=document.f1.username.value;
if(val=""){
alert("请输入用户名")；
document.f1.username.focus();
}else{
var url="loginservlet1?username="+val;
sendRequest(url);
}
}
</script>
---------------------------------------
$.ajax({
url="";//发送的地址
type="";//get.post
data="";//要发送的数据
dataType="";//返回的数据类型xml,html,script,json,text
beforeSend:function(data){//发送请求前执行的代码},
success:function(data){//发送成功后执行的代码},
error:function(data){//请求失败执行的代码}
});
test####
<script type="text/javascript">
$(document).ready(function(){
//当失去焦点触发事件
$("#username").blur(function(){
var value=$(this).val;
if(value==""){
alert("请输入用户名");
return false;
}
$.ajax({
url:"",//servletName
type:"get",
data:{"username":value},
dataType:"text",
success:function(data,strstatus,xhr){ //参数1：返回的数据，参数2：请求的状态字符串，参数3：
xmlHttpRequest对象
if(data=="对不起，该用户名已存在"){
$("#username").val("").css("border-color","red");
}else{
$("#username").css("border-color","green");
}
},
error:function(xhr,strstatus,strError){
alert(strError);
}
});
});
});
</script>
---------------------------------------
<script type="text/javascript">
$(document).ready(function(){
//#province是省select标签
//#city 是市select标签
$("#province").change(function(){
var pid=$(this).val();
//if(pid==0)...
var strdata="province="+pid;
$.ajax({
url:"selectservlet",
type:"get",
data:strdata,
dataType:"json",
success:function(data){
if(data&&data.length!=0){
var $city=$("#city");
$("#city").empty();
for(var i=0;i<data.length;i++){
var $option=$("<option value=\""+data[i].id+"\">"+data[i].cityname
+"</option>");
$city.append($option);
}
}
}
});
});
});
</script>
===============
<form name="f1" action="loginservlet1" method="post">
<input type="text" name="username" id="username" onblur="selectUserName()">
</form>
servlet -doGet(){
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
String userName = request.getParameter("username");
if(userName.equals("xxq")){
out.print("对不起，该用户已存在");
}else{
out.print("此用户名可以使用");
}
out.close();
}
dopost(){
doGet(request,response);
}
==================
<script type="text/javascript">
function processResponse(data){
var $city=$("#city").empty();
$(data).find("cityname").each(function(){
var $this=$(this);
$("<option value=\""+$this.attr("cid")+"\">"+$this.text()+"</option>").appendTo("$city");
});
}
$(document).ready(function(){
//#province是省select标签
//#city 是市select标签
$("#province").change(function(){
var value=$(this).val();
//if(value=="")...
var data="province="value;
$.ajax({
url:"selectservlet",
type:"get",
data:{"province":value},
dataType:"xml",
success:processResponse
});
});
});
</script>
$.get(url,data,processResponse,"json");
$.post(url,data,processResponse,"json");
$.getJson(url,data,processResponse);
$.getScript("包含数据的js文件"，function(){拿到js文件后要执行的代码})
$("#show").html($("form").serialize());//序列化form表单信息 数据是一个字符串
var json={name:"ab",password:"123"};
$("#show").html($.param(json));
扫一扫
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
