Ajax练习题

1、使用Ajax跳转处理页面连接数据库,完成下拉列表

首页:

<body>

<select id="sel">    </select>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

$.ajax({

url:"chuli.php", //处理页面

data:{}, //要提交的值

type:"POST", //提交方式

dataType:"TEXT", //返回类型

success:function(s){ //回调函数

var hang = s.split("|");

var str = "";

for(var i=0;i<hang.length;i++)            {

var lie = hang[i].split("^");

str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";

}

$("#sel").html(str);

}

});

});

</script>

处理页:

<?php

include("../DBDA.php");

$db = new DBDA();

$sql = "select * from Nation";

$attr = $db->Query($sql);

$str = "";

foreach($attr as $v){

$str = $str.implode("^",$v);

$str = $str."|";

}

$str = substr($str,0,strlen($str)-1);

echo $str;                                                        //通过字符串操作返回字符串

2、测试用户名是否可用

首页:

<body>

<div>用户名:<input type="text" id="uid" /><span id="xx"></span></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

$("#uid").blur(function(){

var uid = $(this).val();

//调AJAX

$.ajax({

url:"uidchuli.php",

data:{u:uid},

type:"POST",

dataType:"TEXT",

success: function(data){

if(data.trim() == "OK"){            //去空格

var str = "该用户名可以使用";

$("#xx").html(str);

$("#xx").css("color","green");

}  else {

var str = "该用户名已存在!";

$("#xx").html(str);

$("#xx").css("color","red");

}

}

});

})

});

</script>

处理页:

<?php

$uid = $_POST["u"];

include("../DBDA.php");

$db = new DBDA();

$sql = "select count(*) from Users where Uid=‘{$uid}‘";

$attr = $db->Query($sql);

if($attr[0][0]>0){

echo "NO";

}else{

echo "OK";

}

3、返回值为Json的操作

首页:

<body>

<br />

<div>请输入代号:<input type="text" id="code" />

<input type="button" value="查询" id="btn" />

</div>

<br />

<div id="name"></div>

<br />

<br />

<div>请选择:<select id="sel">

<option value="p001">张三</option>

<option value="p002">李四</option>

<option value="p003">王五</option>

</select></div>

<br />

<div id="xinxi"></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

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

var code = $("#code").val();

$.ajax({

url:"selchuli.php",

data:{code:code},

type:"POST",

dataType:"JSON",

success: function(data){

$("#name").text(data.name);

}

});

})

$("#sel").change(function(){

var code = $(this).val();

$.ajax({

url:"xxchuli.php",

data:{code:code},

type:"POST",

dataType:"JSON",

success: function(data){

var str = "<span>代号:"+data[0]+"姓名:"+data[1]+"性别:"+data[2]+"生日:"+data[4]+"</span>";

$("#xinxi").html(str);

}

});

})

});

</script>

selchuli.php处理页:

<?php

$code = $_POST["code"];

include("../DBDA.php");

$db = new DBDA();

$sql = "select Name from Info where Code = ‘{$code}‘";

$attr = $db->Query($sql);

//做一个关联数组

$arr = array();

$arr["name"] = $attr[0][0];

//将数组转换为JSON

echo json_encode($arr);

xxchuli.php处理页:

<?php

$code = $_POST["code"];

include("../DBDA.php");

$db = new DBDA();

$sql = "select * from Info where Code = ‘{$code}‘";

$attr = $db->Query($sql);

echo json_encode($attr[0]);                //如果是二维数组,在主页面可以使用for(var at in data)循环

时间: 2024-10-13 12:37:28

Ajax练习题的相关文章

5.20练习题

需求: 主界面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

4-2 Ajax

练习题:在购物车的每个商品旁添加按钮,按一下减一个,数量为0删除该商品.先用普通方法再用Ajax支持. 1.自定义方法decrease, 为其设定路径routes.rb. 在resouurces :line_items的块中加put 'decrease', on: :member 2.在controller中定义这个方法. 注意??:因为要用到render @cart渲染首页侧边栏,所以需要在action中声明实例变量@cart. 这里有前期模块CurrentCart中的方法set_cart,通

好程序员web前端教程分享前端javascript练习题之promise

好程序员web前端教程分享前端javascript练习题之promisepromise-ajax的封装function ajax(url){//创建promise对象var promise = new Promise(function(resolve,reject){//创建ajax对象if(window.XMLHttpRequest){var xhr = new XMLHttpRequest();}else{var xhr = new ActiveXObject("Microsoft.XMLH

ajax+分页

<!DOCTYPE html><html><head lang="zh-cn"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compat

原生ajax

function ajax() { var ajaxData = { type: arguments[0].type || "GET", url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "text", cont

通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file"

ajax的几种格式

<script type="text/javascript"> $.ajax( { url:'地址', cache:'true/false',//请求是否接口是否缓存 type:'GET/POST'//请求方式 data: {"name":"才结束","age":"18"} 'name=蔡金锁&age=18&' ,//发送的数据 字符串 json dataType:'json',

AJAX学习

一.概述 ajax不是一种新的语言,它是异步的javascript和xml.传统的请求式网页在发送请求和页面响应是同步进行的,我们知道,B/S架构中在浏览器中跑的代码是javascript.HTML标签还有CSS样式文件等,我们的请求可以由javascript代码来写,服务器端的请求数据接受可以由xml来做(因为xml的优势就在于数据的传递,xml容易被解析),而ajax就是将传统的这一过程异步化,达到发出请求后不必刷新整个页面也可以得到响应,其实这一思想不仅可以用在B/S架构的程序设计中,在C

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele