web资料

最新推荐文章于 2024-12-24 23:54:04 发布

00道

最新推荐文章于 2024-12-24 23:54:04 发布

阅读量115

点赞数

文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/m0_70132659/article/details/130310821

版权

《jQuery AJAX编程》实验指导

$().ready(function () {

$("#regist").click(function () { //regist为登录点击操作

var msg = "";

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

msg = "请输入用户名";

}

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

msg = "请输入手机号";

}

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

msg = "请输入密码";

}

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

msg = "再一次输入密码"

}

else if ($("#mimaagainText").val() != $("#mimaText").val()) {

msg = "密码不一致，请再次输入"

}

else {

msg = "";

}

//验证出错

if (msg != "") {

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

}

else {

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

$.ajax({

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

data: paras,

type: "POST",

datatype: "json",

//访问成功，解析json

success: function (data) {

//如果操作成功

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

window.location.href = "success.html"

}

else {

window.location.href = "error.html"

}

//访问失败

error: function (data) {

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

}

})

}

});

</script>

《Web前端综合应用》实验指导

六、实验内容和步骤

开发一个简单英语四级英汉电子词典。

1、设计词典布局（美观即可，不要求按设计图精确布局）

（1）创建网页，创建网页文件dict.html。

（2）网页布局

使用div+css按图1进行布局，风格为手机网页，文本框和下面内容区域宽度自适应，搜索按钮宽度固定，搜索栏固定到屏幕最上方。

2、词典页面操作典事件编程

实现方法：向接口getSimilarWords发起异步（AJAX）请求（参见《实验6_Web接口文档》第1节），服务器会返回响应，包含了相似词汇数据，将该数组中的词汇渲染到内容区域中（如图2所示），参考代码：

点击图2中的“查词按钮”，按文本框中的词汇进行查询；点击图2中相似词汇列表中的项目，按列表项中的词汇进行查询；查询需要异步（AJAX）调用getWordDetail接口（参见《实验6_Web接口文档》第2节），查询结果按图3的显示效果填充。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#word {

margin-right: 140px;

}

#word input {

width: 100%;

height: 40px;

}

#search {

float: right;

width: 120px;

height: 46px;

}

#search input {

width: 100%;

height: 46px;

}

</style>

$().ready(function () {

$("#search input").click(function () {

var word = $("#word input").val();

searchword(word);

});

//文本框改变事件

$("#word input").on("input", function () {

$.ajax({

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

//this表示触发文本事件的dom元素，$（this）将dom事件转换query对象

data: { word: $(this).val() },

//data: {word:this.value}, javascripy的写法

type: "GET",

datatype: "JSON",

success: function (jdata) {

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

var html = "<ul>";

for (var i in jdata.content) {

html += "<li>" + jdata.content[i] + "</li>"

}

html += "</ul>";

$("#contend").html(html);

$("#contend li").on("click", function () {

$("#word input").val($(this).text());

//查询

searchword(word);

});

}

error: function (data) {

}

});

function searchword(word) {

$.ajax({

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

data: { word: $("#word input").val() },

type: "GET",

datatype: "JSON",

//访问成功，查看State

success: function (jdata) {

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

var html1 = "<ul>";

for (var i in jdata.content) {

html1 += "<li>";

if (i == 0)

html1 += jdata.content[i].eng+" ";

else

html1+=" ";

for (var j in jdata.content[i].trans) {

html1 += jdata.content[i].trans[j].pos+jdata.content[i].trans[j].chn;

html1 += "<br>";

html1 += " ";

}

html1 += "</li>";

}

html1 += "</ul>";

$("#contend").html(html1);

} else {

}

error: function (jdata) {

}

});

};

</script>

</head>

<body>

</div>

</body>

</html>

《模拟题》实验指导

一．注册页面

<style>

#search div:nth-child(1) {

float: left;

width: 100px;

margin-right: 10px;

text-align: right;

}

#search div:nth-child(2) {

width: 150px;

margin-left: 110px;

}

#submit input {

width: 268px;

margin-top: 10px;

}

#error {

color: #ff0000;

}

</style>

$().ready(function () {

$("#submit input").click(function () {

//一.2 数据约束验证

var prodName = $("#search div:nth-child(2) input").val();

var errorMsg = "";

if (prodName == "") {

errorMsg = "产品名称必须输入";

}

else if (/\d/.test(prodName)) {

errorMsg = "产品名称中不能有数字";

}

if (errorMsg != "") {

$("#error").text(errorMsg);

}

else {

document.location.href = "product.html";

}

});

</script>

<body>

</div>

</body>

产品页面

<style>

.tr1 {

height: 30px;

text-align: center;

}

.tr_next {

height: 100px;

text-align: center;

}

.image {

height: 100px;

width: 100px;

}

.td4 {

background-color: #ffffd0;

}

.td3 {

color: #00ff00;

}

.td3:hover {

color: #ff0000;

}

</style>

$().ready(function () {

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

$.ajax({

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

data: { name: $("#product").val() },

type: "POST",

dataType: "JSON",

success: function (jsonData) {

// document.write(JSON.stringify(jsonData));

//将json对象转成字符串打印出来

(对应二.1让我们把从服务端返回的json数据粘贴到下方)

var html = "<table border='1px' align='center' valign='center'>";

//表头

html += "<tr class='tr1'><th> </th><th>品牌</th><th>型号</th><th>价格</th></tr>";

for (var i in jsonData.data) {//每循环一次就是一行,则每循环一次

，html都要加一个<tr>

var item = jsonData.data[i];

html += "<tr class='tr_next'>";

html += "<td><img class='image'

src = 'http://43.136.217.18:8081/img/" + item.image

+ "'></td>";//第一列

html += "<td>" + item.brand + "</td>";

html += "<td><a class='td3' href = 'http://43.136.217.18:8081/img/"

+ item.image + "'>" + item.model + "</a></td>";

html += "<td class='td4'>" + item.price + "</td>";

html += "</tr>";

}

html += "</table>";//表尾

$("div:nth-child(2)").html(html);//渲染

}

});

</script>

<body>

</body>