JS及JQuery库的引入与json串的来源

Love The Way You Lie 2022-04-23 06:20 129阅读 0赞

前文：

JS代码的简单介绍，并引入JS库JQuery。

一、JS

1、定义

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70][]

2.自定义对象及引出json串

json串的出现用于前端页面js代码中与后台数据的交互传输，与js中自定义对象的格式极其类似。

json串中健值为  var json=\{"width":100,"height":200,"name":"rose"\};     使用双引号。  
              js中自定义对象为  var obj=\{width:100,height:200\};  或  var obj=\{'width':100,'height':200\};     不使用或使用单引号。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70 1][]

二、介绍及引入

![20190403193721676.png][]

三、触发事件

![20190403193752255.png][]

四、JQuery代码演示

//@ sourceURL=login_ajax.js
    $(function(){
    	
    	//给form表单添加submit事件
    	$("form").submit(function(){
    		return login();
    	});
    	
    });
    function login(){
    	//获取页面数据
    	var userPhone=$("form input[name=userphone]").val();
    	var userPassword=$("form input[name=password]").val();
    	if(userPhone==""){
    		$("form table tr:eq(0) td span").html("手机号不能为空");
    		return false;
    	}
    	if(userPassword==""){
    		$("form table tr:eq(1) td span").html("密码不能为空");
    		return false;
    	}
    	//发送异步请求
    	$.ajax({
    		url:"/user_ajax/login",
    		type:"post",
    		data:{"userPhone":userPhone,"userPassword":userPassword},
    		dataType:"json",
    		success:function(result){
    			//result是服务端返回的数据
    			if(result.status==200){
    				alert("登陆成功！");
    				window.location.href="/";
    			}else if(result.status==201){
    				alert(result.status+":"+result.msg);
    			}
    		},
    		error:function(){
    			alert("请求失败!");
    		}
    	});
    	
    	return false;
    }

通过$()捕获元素并触发事件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70]: /images/20220323/28bee7547c3245a093d488d30b3606ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY4NzA3NA_size_16_color_FFFFFF_t_70 1]: /images/20220323/9d13ac142d0c450097a3e8364d5a4629.png
[20190403193721676.png]: /images/20220323/9253f004fde241eaa5597ef8b332eafa.png
[20190403193752255.png]: /images/20220323/8170d13362bd4db2a38fd1b069195290.png