利用ajax创建表单联动

最新推荐文章于 2022-01-15 19:23:29 发布
最新推荐文章于 2022-01-15 19:23:29 发布
阅读量1.6k 收藏
点赞数
文章标签： ajax mysql json xmlhttprequest query callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whjwhja6/article/details/8093947
版权

实现功能：当选择系别时，该系相关的专业出现在专业中，选中专业后，该专业的学生会显示到学生中

 

1、menu.php

<script language="javascript" type="text/javascript" src="ajax.js">

</script>//引用ajax

<script language="javascript" type="text/javascript">

//选择系

function initdep(){

testXHR("xi.php","",load_dep);//testXHR函数应与ajax.js里的函数名保持一致。load_dep回调函数

}

function load_dep(xhr){//xhr是个保存XMLHttpRequest对象的xhr变量(必须有)

var json=eval("("+xhr.responseText+")");//获取json的内容，json的格式

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

var op_dep=document.createElement("option");//创建一个option节点

op_dep.text=json[i].dep_name;

op_dep.value=json[i].dep_name;

document.getElementById("xi").add(op_dep,null); //add（）往option中添加内容

}

}

//选择转业

function load_zy(str){//load_zy(this.value),str就是当前的所选择的系

clear(document.getElementById("stu"));//每次选择系时都需要清空学生

clear(document.getElementById("zy"));//选择系时清空专业

testXHR("zy.php","zy="+encodeURI(str),lzy);

}

function clear(obj){

obj.length=0;

}

function lzy(xhr){

var json=eval("("+xhr.responseText+")");

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

var op_dep=document.createElement("option");

op_dep.text=json[i].stu_zy;

op_dep.value=json[i].stu_zy;

document.getElementById("zy").add(op_dep,null);

}

}

//选择学生

function l_stu(str){

clear(document.getElementById("stu"));

testXHR("stu.php","zy="+encodeURI(str),ls);

}

function clear(obj){

obj.length=0;

}

function ls(xhr){

var json=eval("("+xhr.responseText+")");

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

var op_dep=document.createElement("option");

op_dep.text=json[i].name;

op_dep.value=json[i].name;

document.getElementById("stu").add(op_dep,null);

}

}

</script>

</head>

<body οnlοad="initdep()">

<form action="" method="post">

<select id="xi" οnchange="load_zy(this.value)"><option>--请选择系--</option></select>

<select id="zy" οnchange="l_stu(this.value)"><option>--请选择转业--</option></select>

<select id="stu"><option>--请选择学生--</option></select>

</form>

2、ajax.js

function initXHR(){

function initXHR(){

//判断浏览器的版本

return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

}

function testXHR(serverUrl,Parms,callBack){

var xhr=initXHR();//初始化XHR

var url=serverUrl+"?"+Parms+"&r="+Math.random();//初始化url。serverUrl传送的文件。Parms参数

xhr.open("GET",url,true);//打开url

xhr.send(null);//发送请求

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

callBack(xhr);//callback回调函数,自动执行，有名字，函数执行完后会给主程序一个响应

}

}

}

3、xi.php

<?php

$link=mysql_connect("localhost","root","123") or die("数据库连接失败");

mysql_select_db("xf",$link);

mysql_query("set names utf8");

$result=mysql_query("select distinct dep_name from department");

//把html的格式转换成json的形式，例如单纯的遍历数组：id=>112,name=>李四，要变成[{stu_name：张三}，{stu_name:李四}]格式，而这种格式叫做json数组字面量的格式

$str="";

while($row=mysql_fetch_assoc($result)){

foreach($row as $key=>$v){

$str.="{".$key.':"'.$v.'"},';//构造json为数组字面量，例如str={stu_name：张三}，{stu_name:李四}，

}

}

$str=rtrim($str,",");//去除最右面的逗号（就是为了构造成json数组字面量的形式）现在变成str={stu_name：张三}，{stu_name:李四}

$str="[".$str."]";//在整个json对象外面加上[]（就是为了构造成json数组字面量的形式）现在变成str=[{stu_name：张三}，{stu_name:李四}]

echo $str;

?>

4、zy.php

<?php

$link=mysql_connect("localhost","root","123") or die("数据库连接失败");

mysql_select_db("xf",$link);

mysql_query("set names utf8");

$result=mysql_query("select stu_zy from department where dep_name like '".$_GET["zy"]."'");

$str="";

while($row=mysql_fetch_assoc($result)){

foreach($row as $key=>$v){

$str.="{".$key.':"'.$v.'"},';

}

}

$str=rtrim($str,",");

$str="[".$str."]";

echo $str;

?>

5、stu.php

<?php

$link=mysql_connect("localhost","root","123") or die("数据库连接失败");

mysql_select_db("xf",$link);

mysql_query("set names utf8");

$result=mysql_query("select stu_id,stu_name from stuinfo s join department d on s.stu_zy=d.stu_zy where d.stu_zy like'".$_GET["zy"]."'");

$str="";

while($row=mysql_fetch_assoc($result)){

$str.='{'.'id:"'.$row["stu_id"].'",name:"'.$row["stu_name"].'"},';

}

$str=rtrim($str,",");

$str="[".$str."]";

echo $str;

?>

whjwhja6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
django ajax 表单联动,Django-ajax之三级联动
weixin_42521186的博客
08-05 580
在使用ajax，我们经常做一个案例：页面加载时，将全国的省份加载进来；若选择省份，则出现本省的所有地市；若选择地市，则出现本地市的所有区县。今天我用Django和ajax来实现。第一步：设计数据模型为了减少表的数量，我设计了一张带有父id的表，为了简单，也有level(0位省份、2地市、3区县)classAddress_Province(models.Model):code= models.Cha...
Ajax实现省市联动效果
11-08
"省市联动效果"是Ajax应用的一个常见场景，尤其在地址选择、地区筛选等需求中尤为常见。 省市联动效果的基本概念是，当用户在选择省份时，通过Ajax异步请求，后台返回对应省份的城市列表，并动态地更新到页面的城市...
ajax创建表单,通过ajax提交ajax创建的表单
weixin_30030437的博客
08-05 397
我无法通过ajax获取ajax加载的表单(#ajaxLoadedForm)提交。 formData对象不收集数据。我想我必须附加一个事件处理程序的形式，以便DOM识别它，但我无法弄清楚如何。通过ajax提交ajax创建的表单一些注释：我绕过'submit'方法并使用按钮(#button)，所以我无法附加处理程序。形式本身是#button的兄弟，而不是孩子。Your Full NameSubmit ...
ajax动态二级表单联动
weixin_33772645的博客
07-31 198
配置文件web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun...
Ajax-制作表单
weixin_60020621的博客
01-15 326
Form表单的基本使用 什么是表单 表单在网页中主要负责 数据采集功能。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form>标签的提交操作，把采集的信息提交到服务器端进行处理 表单的组成部分 表单标签（form标签） 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等 表单按钮：通过设置type属性为submit来触发form表单的提交 <form> 标签的属性(⭐⭐
ajax 构建form,AjaxForm
weixin_42520132的博客
08-05 228
Action代码：[HttpPost]public ActionResult _CreateComment(PhotoCommentEditModel model){if (!ModelState.IsValid)return View(model);PhotoComment comment = model.AsPhotoComment();if (comment.Body.Contains("e...
原生javascript AJAX 三级联动的实现代码
10-18
7. 用户体验：通过AJAX的异步请求和及时更新，可以提高用户体验，避免了传统表单提交后页面刷新带来的不便。 以上知识点详细解释了原生javascript AJAX三级联动的实现方式，包括前端的HTML结构搭建，JavaScript中...
php+ajax二级联动
11-29
1. **HTML结构**：首先，我们需要创建HTML表单，包含省市县的下拉列表。这些列表通常通过`<select>`元素表示，每个下拉列表都有一个`onchange`事件，触发AJAX请求。 2. **AJAX请求**：当用户在省的下拉列表中选择一...
ajax三级联动实现代码
10-19
综上所述，这个三级联动实现的关键在于利用AJAX异步加载数据，根据用户的选择动态更新下拉框选项。通过这种方式，我们可以实现流畅且高效的用户交互，提高用户体验。这种技术不仅适用于地址选择，还可以应用到其他...
多表联动Ajax
我是泛滥
01-05 287
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.min.js"></script>
ajax 异步实现两级联动下拉列表和输入提示
12-27
ajax异步实现 两级联动下拉列表和分类显示数据,包含了JS+CSS的简单设计
js实现省和学校二级联动
05-15
这是使用Js实现的一个简单的省和学校的二级联动，每个省份的学校并没有完全添加，如果有需要可以自己添加，很简单，适合初学者看看
前端点滴（JS核心）（三）---- 使用 Ajax 实现多表联动（优化）、XML、FromData对象、跨域请求
授人以鱼
01-28 526
前端点滴（JS核心）（三）----倾尽所有优化三表联动1. 将数据库修改成文件2. 简化 PHP 代码 （控制层）3. 修改 JavaScript 代码（1）加载省份（2）加载对应的市（3）加载对应的区、县4. 简化 JavaScript 代码（封装函数）XML1. 什么是 XML2. XML 的媒介作用3. XML 实例4. PHP 返回 XML 格式的数据5. 浏览器处理 XML 格式数据 优...
ajax实现联动
qq_42868897的博客
11-14 252
思路 1、在jq就绪函数中用Ajax获取第一个下拉框里面的所有数据 2、通过循环拼装下拉框 3、通过下拉框的改变事件进行监听 并且获得第二层下拉框的数据，完成拼装 4、在第一个下拉框改变事件中进行二层下拉框清空， 5、以此类推就可以事件多层的联动 代码 后端代码就不放了 下面是前端的代码 <%-- Created by IntelliJ IDEA. User: Administrat...
Ajax实现联动效果
weixin_34194317的博客
08-12 62
这类东西很多人都写过，但我是第一次写，支持一下菜鸟的原创吧～第一级是写死的（因为省不会变的），以下三级都是现查的数据库，由于没有采用DIV格式，所以有些ID很长~js代码： 1function ProvinceChange(obj1,obj2,obj3) 2 { 3if(typeof(ActiveXObject) != "undefine...
js 操作表单
xustart7720的博客
11-21 5774
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text">，用于输入文本； 口令框，对应的<input type="password">，用于输入口令；
ajax给表格填值,填报表用ajax实现关联单元格自动填充
weixin_29229989的博客
08-05 605
在做填填报表用ajax实现关联单元格自动填充">报表。如果是简单的加减乘除运算，可以在单元格的自动计算里面实现；如果关联单元格显示的内容是从数据库中取出来的，就不能写加减乘除表达式来实现了，需要用ajax来实现。比如一个货物订单表，当选择完产品后，产品的单价、库存量自动填充，然后用户根据这些信息填写订货量。 实现思路：利用js函数，js函数中调用ajax，ajax中调用servlet查询数据...
利用Ajax实现动态验证与联动功能详解
ajax利用这种特性，通过javascript在用户界面与服务器之间创建实时通信，显著提升用户体验。 在实际应用中，ajax常用于动态验证，如验证用户名和密码的正确性。由于javascript在客户端执行，它可以快速检查输入的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值