Ajax与JSON (2)
《Web程序设计》课程实验报告
实验名称： Ajax与JSON
一、实验目的
(1) 掌握jQuery使用Ajax；
(2) 了解前端框架开发Ajax
二、实验内容
(1) 实验1：JSON：完成：90分
(2) 实验2：jQuery UI /jQuery Easy UI：完成：90分
(3) 实验3：表单提交与表格的动态创建：完成：90分
至少完成3个实验
云平台网址：（可以做一个实验主网页）
实验1网址:http://1.yangduo.applinzi.com/exp10_1.html
实验2网址:http://1.yangduo.applinzi.com/exp10_2.html
实验3网址:http://1.yangduo.applinzi.com/exp10_3.html
三、实验步骤及设计说明
(1) 实验1：
通过ajax获得数据，返回格式采用JSON方式，使省份自上而下的value递增，通过获得选中省份的value，传给php文件，通过这个value值获得对应省份的面积，人口和城市信息，返回数据，打印出对应的信息即可。
(3) 实验2：
根据实验要求，通过http://jqueryui.com/demos/，找到相应的控件，想要一个特效控制，在网站里找到闪烁跳动相应的控件，将该特效赋给两个UI即可。
(4) 实验3：
用Ajax完成表单异步提交，由Ajax提交整个表单数据，然后PHP返回JSON数据，数据库展示部分先隐藏起来，当点击显示全部学生题目的超链接时，将展示数据库的div设置为显示。采用pdo方式进行数据库连接，实现修改题目和增加题目通过不同的php来实现，拿到返回的信息，实现打印即可。
四、实验结果与结论：
(1) 实验1
(2) 实验2
点击特效时，上面与下面的UI同时出现闪烁跳动的特效。
(3) 实验3
添加题目：
修改题目：
五、实验中遇到的问题、解决方法及体会
(1) 在做实验三的时候，通过pdo方式进行数据库连接，一开始连接不成功，百度了一下修改了php配置里的信息才成功连接上。
(2) 通过pdo进行连接，与MySQL连接所用的函数不同，一开始以为函数通用，所以老是无法实 现增加题目和修改题目，后来查了一些pdo连接对应的方法，测试那些方法的可用性，并应用 到实验上，实现了所要功能。
附录：程序源程序（在此贴上网页源代码）
(1) 实验1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON</title>
<style type="text/css">
#main{
border:1px solid black;
padding:10px;
width: 350px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#province").change(
function()
{
var id=$("#province").val();
$.ajax({
url:"exp10_1.php",
type:"GET",
data:{id:id},
dataType:"json",
success:getPassage
});
});
function getPassage(result)
{
var getCity=document.getElementById("city");
for(var i in result.cities)
getCity[i]=new Option(result.cities[i],result.cities[i]);
document.getElementById("area").innerHTML=result.area+" 万平方公里";
document.getElementById("popu").innerHTML=result.population+" 万人";
}
});
</script>
</head>
<body>
<div id="main">
<label>请选择省份：</label>
<select id="province">
<option value="0">-请选择-</option>
<option value="1">广东省</option>
<option value="2">福建省</option>
<option value="3">湖南省</option>
<option value="4">浙江省</option>
</select>
<label>城市：</label>
<select id="city">
<option value="0">-请选择-</option>
</select><br/>
<label>总面积：</label>
<span id="area"></span><br />
<label>总人口：</label>
<span id="popu"></span>
</div>
</body>
</html>
<?php
$city1=["area"=>17.98,"population"=>10800,
"cities"=>["广州市","深圳市","珠海市","中山市"]];
$city2=["area"=>12.4,"population"=>3839,
"cities"=>["厦门市","福州市","泉州市","漳州市"]];
$city3=["area"=>21.18,"population"=>6783,
"cities"=> ["长沙市","株洲市","湘潭市","龙岩市"]];
$city4=["area"=>10.18,"population"=>5539,
"cities"=>["杭州市","温州市","苏州市","义乌市"]];
$dataObj=[$city1,$city2,$city3,$city4];
$id=$_GET['id'];
$jsonStrs = json_encode($dataObj[$id-1]);
echo $jsonStrs;
?>
(2) 实验2：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 特效</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().click(function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
$(function() {
// 运行当前特效
function runEffect() {
// 获取特效类型
var selectedEffect = "pulsate";
var options = {};
// 运行特效
$( "#sortable,#accordion" ).effect( selectedEffect, options, 500, callback );
};
// 回调函数
function callback() {
setTimeout(function() {
$( "#sortable,#accordion" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>第一项</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>第二项</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>第三项</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>第四项</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>第五项</li>
</ul><br />
<a href="#" id="button" class="ui-state-default ui-corner-all">特效</a>
<br/><br/>
<div id="accordion">
<h3>Section1</h3>
<div>
<p>Section1来了！</p>
</div>
<h3>Section2</h3>
<div>
<p>Section2来了！</p>
</div id="hid1">
<h3>Section3</h3>
<div>
<p>Section3来了！</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section4</h3>
<div>
<p>Section4来了！</p>
</div>
</div>
<button id="toggle">切换图标</button>
</body>
</html>
实验三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交与表格的动态创建</title>
<style type="text/css">
#myForm{
border: 1px solid red;
width:370px;
}
div{
width: 300px;
padding-left: 30px;
margin: 10px;
}
input[type='text']{
width: 200px;
}
h3{
margin-left: 60px;
}
div label{
display: inline-block;
width: 80px;
text-align: right;
}
table{
border-collapse: collapse;
display: none;
}
table tr:first-child{
background: yellow;
}
table tr:nth-child(2n+3){
background: greenyellow;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var test=true;
$('#getIt').click(
function()
{
if(test)
{
$.ajax({
url:'exp10_3.php',
dataType:"json",
success:showTable
});
test=false;
}else{
$("#getAll").toggle();
}
}
);
$('#myForm').submit(
function()
{
$.ajax({
type:"POST",
url:"exp10_3_1.php",
dataType:"json",
data:$('#myForm').serialize(),
success:showTable,
//success:function(data){alert(data);},
error:function(){alert('error')}
});
return false;
}
);
});
function showTable(data)
{
var table=$("#getAll");
table.toggle();//显示
for(var i in data) {
row = data[i];
var tr = $("<tr></tr>").appendTo(table);
$("<td></td>").appendTo(tr).html(parseInt(1)+parseInt(i));
$("<td></td>").appendTo(tr).html(row.sno);
$("<td></td>").appendTo(tr).html(row.name);
$("<td>" + row.title + "</td>").appendTo(tr);
$("<td>" + row.last_time + "</td>").appendTo(tr);
$("<td>" + row.state + "</td>").appendTo(tr);
$("<td>" + row.partner + "</td>").appendTo(tr);
}
}
</script>
</head>
<body>
<form action="" id="myForm">
<h3>课程设计题目统计系统Ajax</h3>
<div>
<label for="stu_num">学生学号：</label>
<input type="text" id="stu_num" name="sno" placeholder="输入12位学号" pattern="\d{12}"/>
</div>
<div>
<label for="stu_name">学生姓名：</label>
<input type="text" id="stu_name" name="name" placeholder="姓名"/>
</div>
<div>
<label for="stu_psw">修改密码：</label>
<input type="text" id="stu_psw" name="psw" placeholder="首次输入后作为后面修改的密码"/>
</div>
<div>
<label for="stu_item">你的题目：</label>
<input type="text" id="stu_item" name="title" placeholder="按照课程设计题目要求"/>
</div>
<div>
<label for="stu_stu">合作学生：</label>
<input type="text" id="stu_stu" name="stu" placeholder="姓名，没有就空，只负责不同方面"/>
</div>
<div>
<label> </label>
<input type="radio" id='add' name="check" value="0" />添加题目
<input type="radio" id='change' name="check" value="1" />修改题目
</div>
<div>
<label> </label>
<input type="submit" value="提交操作" id="sub"/>
</div>
<div>
<label> </label>
<a href="#" id="getIt">显示全部学生题目</a>
</div>
</form>
<br />
<table id="getAll" border="1">
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>题目</td>
<td>录入时间</td>
<td>状态</td>
<td>合作学生</td>
</tr>
</table>
</body>
</html>
Exp10_3.php 实现显示全部学生题目
<?php
$dsn = "mysql:host=127.0.0.1;dbname=exp5";//连接串
$option = [PDO::MYSQL_ATTR_INIT_COMMAND =>
"SET NAMES 'UTF8'"];//字符集控制
$db = new PDO($dsn, 'root', '654321', $option);
$rs = $db->query("Select * From students");
$dataArr = $rs->fetchAll();
echo json_encode($dataArr);
$db = null;
?>
Exp10_3_1.php 实现增加题目修改题目
<?php
$dsn = "mysql:host=127.0.0.1;dbname=exp5";//连接串
$option = [PDO::MYSQL_ATTR_INIT_COMMAND =>
"SET NAMES 'UTF8'"];//字符集控制
$db = new PDO($dsn, 'root', '654321', $option);
@$sno=$_REQUEST['sno'];
@$name=$_REQUEST['name'];
@$psw=$_REQUEST['psw'];
@$title=$_REQUEST['title'];
@$partner=$_REQUEST['stu'];
@$check=$_REQUEST['check'];
if($check==0)
{
$rs=$db->exec("INSERT INTO students(name,sno,psw,title,last_time,partner)
VALUES('$name','$sno','$psw','$title',now(),'$partner')");
//若成功插入，返回插入个数
if(!$rs)
die('学生选题信息插入失败！');
}else if($check==1)
{
$rs=$db->query("select * from students where sno='".$sno."' and psw='".$psw."'");
$ret=$rs->rowCount();//获取影响个数
if($ret==1)
{
$sqlUpdate="update students set title='".$title."',partner='".$partner."',last_time=now() where sno='".$sno."'";
$db->query($sqlUpdate);
}
}
$rs = $db->query("Select * From students");
$dataArr = $rs->fetchAll();
echo json_encode($dataArr);
$db = null;
?>