前端页面的语法 jquery javascript 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));

 

posted @ 2017-10-24 21:14  m97i  阅读(320)  评论(0编辑  收藏  举报