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