web实验五_数据系统原理实验五web-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61530475/article/details/130326589

一、实验目标

通过本次实验理解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

同步代码

<head>

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>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

<div id="errorArea" style="display: none;">异常显示区域</div>

</form>

</div>

</div>

</div>

</body>

</html>

异步代码

<head>

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); //横屏切换时执行

$().ready(function(){

$("#regist").click(function(){

var errmassage="";

if($("#name").val()==""){

errmassage="请输入用户名";

}

else if($("#phone").val()==""){

errmassage="请输入手机号";

}

else if($("#password").val()==""){

errmassage="请输入密码";

}

if(errmassage!=""){

$("#errorArea").text(errmassage);

}

else{

var paras={name:$("#name").val(),phone:$("#phone").val(),password:$("#password").val()}

$.ajax({

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

data:paras,

type:"POST",

datatype:"json",

success:function(data){

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

window.location.href="http://43.136.217.18:8081/success.html";

}

else{

var msg=data.msg;

$("#errorArea").html(msg)

}

error:function(data){

window.location.href="http://43.136.217.18:8081/error.html";

}

})

}

})

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>