《jQuery AJAX编程》实验5

最新推荐文章于 2024-08-21 21:16:19 发布

deersum

最新推荐文章于 2024-08-21 21:16:19 发布

阅读量110

点赞数 1

文章标签： okhttp

本文链接：https://blog.csdn.net/deersum/article/details/132656724

版权

本文介绍了如何通过jQuery实现AJAX的GET和POST请求，包括同步和异步注册功能，以及在VisualStudioCode等工具环境下进行开发，并要求提交实验报告和源代码。还涉及了Tomcat服务器部署和相关技术应用。

摘要由CSDN通过智能技术生成

一、实验目标

通过本次实验理解AJAX的原理，掌握jQuery AJAX的应用。支撑专业核心能力的培养。

二、实验要求

1. 理解和掌握jQuery AJAX的get方式请求

2. 理解和掌握jQuery AJAX的post方式提交

三、实验内容

jQuery AJAX get方式与服务器交付

jQuery AJAX post方式与服务器交付

四、主要仪器设备

硬件：PC电脑

软件：Visual Studio Code/WebStorm/HBuilder

五、考核方式及要求

提交实验报告、源代码

六、实验内容和步骤

1、修改实验3代码，制作同步注册功能

(1) 将实验3的main.html复制成main_sync.html，参考《实验5_Web接口文档》1.2节，为对应的表单控件添加name属性（同步提交时，控件的name值与服务器收到的参数名一一对应）；将注册按钮类型改为submit；再添加一个form标记将所有表单控件包围，action和method参考《实验5_Web接口文档》1.1节，参考代码（需要添加和修改的地方用红色标示）：

</form>

2、修改实验3代码，制作异步（AJAX）注册功能

(1) 将实验3的main.html复制成main_async.html，参考《实验5_Web接口文档》2.2节中的参数名，提取用户名、手机号和密码框中的值并构造成参数对象，对象属性和参数名一一对应，参考代码：

//提取参数

var paras = { name: "用户名文本框的值", phone: "手机号文本框的值", password: "密码框的值"};

$.ajax({

url: "http://43.136.217.18:8081/registAsync",

data: paras,

type: "POST",

datatype="json",

//访问成功，解析json

success: function(data){

//如果操作成功

if(data.State == "SUC"){

…… //跳转到success.html

}

else{

…… //显示出错信息

}

//访问失败

error: function(data){

….. //显示“无法连接到服务器”

}

})

注意：

① 修改浏览器URL即可完成跳转，如：window.location.href="新页面URL";

② 将success.html和error.html拷贝到main_async.html同一个目录中；

③ 上述错误信息显示到实验3的数据验证失败信息框中。

④ 要求使用jQuery代码编写

3、（选做）部署Tomcat服务器运行网页

（1）参考文档《Tomcat网站部署》部署服务器程序，将main_sync.html、main_async.html、success.html和error.html也部署到网站中。

（2）网页中使用的所有地址要采用相对地址，将地址的域名部分去掉，如：

将http://43.136.217.18:8081/registAsync改为registAsync

七、实验结果

1、编写实验报告：

实验报告中写上网页制作的步骤，并附上重要步骤及结果的截图。

2、提交实验结果：

序号	文件名	说明
1	main_sync.html	同步注册
2	main_async.html	异步注册
3	其他所有css、js和图片文件
4	实验5报告.docx	实验报告

将HTML文件、CSS文件和图片打包，与报告文件分开上传，报告文件不要压缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <script src="server_release/js/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    function setRootFontSize(){
    var rootHtml = document.documentElement;
    var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
    rootHtml.style.fontSize = rem + "px";
    }
    setRootFontSize();   //网页首次载入时执行一次
    window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
    window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    </script>    
  <title>实验5</title>
  <style>
    *{
      margin: 0rem;
      padding: 0rem;
    }
    #header{
      background: #e66c05;
      height: 1.3rem;
    }
    .l{
      float: left;
      height: 1.3rem;
      width: 1.06rem;
    }
    .l img{
      width: 0.55em;
      height: 0.55em;
      margin: .37rem 0rem .38rem .46rem;
    }
    .r{
      float: right;
      height: 1.3rem;
      width: 1.15rem;
    }
    .r img{
      height: 0.55rem;
      margin: .37rem .6rem .38rem 0rem;
    }
    .medium{
      width: 2.5rem;
      height: 1.3rem;
      margin-left: 4.3rem ;
      color:#ffffff;
      font-size: .55rem;
      line-height: 1.3rem;
    }
    .shenti{
      height: 15.84rem;
    }
    
    .bootom{
      background: #e66c05;
      height: 1.46rem;
      
    }
    .bootom .btm_left{
      width: 1.2rem;
      height: 1.28rem;
      background: #ffffff;
      float: left;
      margin-left: .26rem;
    }
    .bootom .btm_left div{
      height: .65rem;
      width: .65rem;
    }
    .bootom .btm_left div img{
      height: .64rem;
      margin: .18rem .30rem .5rem;
    }
    .bootom .btm_left .span{
      height: .32rem;
      width: .64rem;
      font-size: .28rem;
      margin: .2rem .33rem .07rem;
      color: #e66c05;
    }
    .bootom .btm_right{
      width: 1.2rem;
      height: 1.28rem;
      float: right;
      margin-right: .26rem;
    }
    .bootom .btm_right div{
      height: .65rem;
      width: .65rem;
    }
    .bootom .btm_right div img{
      height: .64rem;
      margin: .18rem .30rem .5rem;
    }
    .bootom .btm_right .shezhi{
      height: .32rem;
      width: .64rem;
      font-size: .28rem;
      margin: .2rem .33rem .07rem;
      color: #ffffff;
    }

    .shenti .shuru{
      width: 9.87rem;
      height: 5.5rem;
      margin-top: .6rem;
      margin-left: .44rem;
    }
    .shuru span{
      font-size: .45rem;
      color: #5f5f5f;
    }
    .shuru input{
      border-bottom: .04rem solid #a1a1a1;
      
      border-left: 0 ;
      border-right: 0;
      border-top: 0 ;
    
    }
    br{
      height: .5rem;
    }
    .zhuche{
      display: block;
      width: 10rem;
      height: 1.13rem;
      margin-left: .4rem;
      background: #e66c05;
      margin-top: .2rem;
      font-size: .54rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.13rem;
    }
    .xia{
      width: 10rem;
      height: .3rem;
      margin-top: .3rem;
      margin-left: .4rem;
    }
    
    .xia .xia_l{
      height: .3rem;
      width: 1.3rem;
      font-size: .28rem;
      color: #5f5f5f;
      float: left;
    }
    .xia .xia_r{
      height: .3rem;
      width: 1.64rem;
      font-size: .28rem;
      color: #5f5f5f;
      float: right;
    }
		#errorArea{
			margin-top: .2rem; 
			font-size: .48rem;
			text-align: center;
			color: red;
			
		}
  </style>

<script type="text/javascript">
	function init(){
		document.getElementById("errorArea").style.display="none";
	}
	
	function checkReg(){
		var errorArea=document.getElementById("errorArea")
		var regExp=new RegExp("^1[3578]\\d{9}$")//手机号判断正则

		var firstpaser=document.getElementById("paserText").value//获取第一次输入的密码

		if(document.getElementById("userText").value==""){
			errorArea.style.display="block"
			errorArea.innerText="* 用户名不能为空"
		}
		else if(document.getElementById("telText").value==""){
			errorArea.style.display="block";
			errorArea.innerText="* 手机号不能为空"
		}
		else if(!regExp.test(document.getElementById("telText").value)){
			errorArea.style.display="block";
			errorArea.innerText="* 手机号不正确"
		}
		else if(document.getElementById("codeText").value==""){
			errorArea.style.display="block";
			errorArea.innerText="* 验证码不能为空"
		}
		else if(document.getElementById("codeText").value=="123456"){
			errorArea.style.display="block";
			errorArea.innerText="* 验证码不正确"
		}
		else if(document.getElementById("paserText").value==""){
			errorArea.style.display="block";
			errorArea.innerText="* 密码不能为空"
		}
		else if(document.getElementById("repasText").value==""){
			errorArea.style.display="block";
			errorArea.innerText="* 确认密码不能为空"
		}
		else if(document.getElementById("repasText").value!=firstpaser){
			errorArea.style.display="block";
			errorArea.innerText="* 两次输入密码不一致"
		}
    else{
      // location.href="网页.html"
      // open("http://www.baidu.com")
    }
	}
	function checkCode(){
		var errorArea=document.getElementById("errorArea")
		var regExp=new RegExp("^1[3578]\\d{9}$")//手机号判断正则

		if(document.getElementById("telText").value==""){
			errorArea.style.display="block";
			errorArea.innerText="* 手机号不能为空"
		}
		else if(!regExp.test(document.getElementById("telText").value)){
			errorArea.style.display="block";
			errorArea.innerText="* 手机号不正确"
		}
    else{
      // $("#btn").hide()
      var btn=document.getElementById("btn")
      let i=60
      // obj.disabled=true
      // obj.innerHTML='${i}秒后重新获取'

      // let timer=setInterval(function(){
      //   i--
      //   obj.disabled=true
      //   obj.innerHTML='${i}秒后重新获取'
      //   if(i==0){
      //     clearInterval(timer)
      //     obj.innerHTML="获取验证码"
      //     obj.disabled=false
      //   }

      // },1000)
      
      // btn.disabled=true
      function time(t){
        if(i==0){
          t.disabled=false
          t.value="发送验证码"
        }else{
          t.style.color='gray'
          t.disabled=true
          t.value=i+"s后重新发送"
          i--
          setTimeout(function(){time(t)},1000)
        }
      }
      time(btn)
      
    }
	}

	function reinput(){
		var errorArea=document.getElementById("errorArea")
		errorArea.style.display="none"
	}
</script>

<script>
  $().ready(function(){
    $("#regist").click(function(){
      if($("#userText").val()=="")
        msg="请输入用户名";
      else{
        var paras={
          name:$("#userText").val(),
          phone: $("#telText").val(),
          password: $("#paserText").val()
        };
        $.ajax({
          url: "http://43.136.217.18:8081/registAsync",
          data: paras,
          type: "POST",
          datatype:"json",
          
          //访问成功
          success: function(data){
            if(data.state=="SUC"){
              alert(data.content.name+" "+data.content.phone);
              location.href="success.html"
            }
            else{
              alert("错误")
            }
          },
        });
      }
      
    });
  })
</script>

</head>
<body onload="init()">
  <div id="header">
    <div class="l"><img src=".\server_release\img\sub_back.png" alt=""></div>
    <div class="r"><img src=".\server_release\img\sub_more.png" alt=""></div>
    <div class="medium" id="name">用户注册</div>
  </div>
  <div class="shenti">
    <div class="shuru">
      <span>用户名</span>&nbsp;&nbsp;<input type="text" placeholder="请输入用户名" id="userText" style="width:7.62rem"  oninput="reinput()">
      <br>
      <span>手机号</span>&nbsp;&nbsp;<input type="text" placeholder="请输入手机号" id="telText" oninput="reinput()">
      <!-- <span><font color="#e66c06" style="font-size: .28rem;"">发送验证码</font></span> -->
			<input type="button" value="发送验证码" id="btn" style="display: inline-block;border-bottom: 0; font-size: .28rem; color:#e66c06 " onclick="checkCode()">
			<input type="number" id="codeText" placeholder="请输入验证码" style="width: 2rem;" oninput="reinput()"">
      <br>
      <span>密码</span>&nbsp;&nbsp;&nbsp;<input type="password" style="width:7.62rem" id="paserText" oninput="reinput()">
      <br>
      <span>确认密码</span>&nbsp;<input type="password" style="width:7.48rem" id="repasText" oninput="reinput()">
    </div>
    
		<div id="errorArea">* 用户名不能为空</div>
		
    <div><input class="zhuche" type='button' value='注册' onClick="checkReg()" id="regist" ></div>
    <div class="xia">
      <div class="xia_l">已有账号</div>
      <div class="xia_r">更换手机号</div>
    </div>
  </div>
  <div class="bootom">
    <div class="btm_left">
      <div><img src=".\server_release\img\main_home2.png" alt=""></div>
      <div class="span">首页</div>
    </div>
    <div class="btm_right">
      <div><img src=".\server_release\img\main_config1.png" alt=""></div>
      <div class="shezhi">设置</div>
    </div>
  </div>
</body>
</html>

deersum

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《jQuery AJAX编程》实验5

(1) 将实验3的main.html复制成main_sync.html，参考《实验5_Web接口文档》1.2节，为对应的表单控件添加name属性（同步提交时，控件的name值与服务器收到的参数名一一对应）；（1）参考文档《Tomcat网站部署》部署服务器程序，将main_sync.html、main_async.html、success.html和error.html也部署到网站中。② 将success.html和error.html拷贝到main_async.html同一个目录中；
复制链接

扫一扫