jQuery+Ajax因为异步加载问题，无法回显 使用jQuery和Ajax实现两级联动
因为博客中很多文章直接放出代码根本看不懂在做什么，需求是什么，所以这里我一步步讲解，后面也会贴出源代码
步骤详解
在了解怎么实现之前先看一下我这地方的具体的需求：
对一个回复内容的修改，回复内容中包含以下的字段：
回复唯一的id: reply_id
单位（单位id：orgid；单位名：orgname)
人员（人员id：userid；人员名：username）
回复内容（reply_content)
显示对所有的回复内容进行一个显示
然后选择点击去修改内容
这里有一个小的需求就是，先点击前面的单位，然后后面人员选择的内容就是前面对应的单位中的所有人员，所以就组成了一个两级的联动
怎么实现联动
这里有一个例子select标签实现二级联动
然后我的实现方法的话是这个样子
document.getElementById("orgname").onchange = function(){
var orgid = this.options[this.selectedIndex].value;
getUserListByOrgId(orgid);
}
这里的使用的是Html中的document.getElementById，当然也可以使用$ (jQuery) 实现。
先获取单位的所有的选项
function load_area_option(){
$.ajax({
type:"get",
url:root + "/getOrgList.action",
success:function(result){
if(result.total > 0){
var data = result.data;
//var opt = '<option value="0" selected>全部</option>';
var opt = "";
for(var i = 0 ; i < data.length; i++){
opt += '<option value="'+data[i].orgid+'">'+data[i].orgname+'</option>';
}
$('#orgname').html(opt);
}
loadinfo();
}
});
}
然后只要id = orgname 的select标签内容被选择，那么人员信息就会被填充到username中以供选择，下面是相关的人员选择代码
function getUserListByOrgId(orgId){
$.ajax({
type:"post",
url:root + "/getUsernameByOrgId.action",
data:{orgid:orgId},
success:function(result){
var data = result.data;
var htm = "";
for(var i = 0 ; i < data.length; i++){
htm += '<option value="'+data[i].userid+'">'+data[i].username+'</option>';
}
$('#username').html(htm);
}
});
}
到这里已经实现了两级联动的效果，可是还有一个问题，这里的需求是对回复的修改，单位以及人员原本就拥有值，所以就需要一个回填的操作，不然如果只是需要修改回复文本的内容，单位和人员并不需要修改的情况下，单位和人员也需要进行一次选择？这样太麻烦了
所以这时候就有一个写HTML内容的操作
有人会说直接获取所有回复信息，然后写在页面中不就行了嘛
就像这样
//加载sw_reply
function loadinfo(){
var reply_id = $("input[name='reply_id']").val();
$.ajax({
type:"post",
url: root+"/getSwReplyById.action?replyid="+reply_id,
success:function(result){
var obj = result.data;
getUserlist(obj.orgid);
$("#username").val(obj.userid);
$("#orgname").val(obj.orgid);
$("textarea[name='reply_content']").val(obj.reply_content);
}
});
}
$(function(){
//获取单位信息
load_area_option();
//获取回复信息
loadinfo();
//单位信息选择之后可以继续选择单位人员
document.getElementById("orgname").onchange = function(){
var orgid = this.options[this.selectedIndex].value;
getUserListByOrgId(orgid);
}
})
对应的不都填上了嘛？好像合情合理
先获取所有的单位信息，然后将回复信息回填选择显示，很正常嘛！
但是有一个小问题————ajax异步加载
很可能你会遇到这样一个问题
嗯？ 这是为什么？为什么有时候显示，有时候不显示？
这就是异步加载，就是后面对select标签设置值的操作： $("#orgname").val(obj.orgid);
并不一定就是在所有单位加载成功之后执行
所以有两种情况：
1、单位下拉框加载完毕，往里设置select的值，可以找到对应的单位，可以回显
2、单位下拉框还没有加载完毕，往里设置select的值，找不到对应的单位，回显失败
所以这时候执行顺序很重要了。
想了很久，加上判断？或者设置执行顺序？没有那么难，换个角度：
//获取单位信息
function load_area_option(){
$.ajax({
type:"get",
url:root + "/getOrgList.action",
success:function(result){
if(result.total > 0){
var data = result.data;
//var opt = '<option value="0" selected>全部</option>';
var opt = "";
for(var i = 0 ; i < data.length; i++){
opt += '<option value="'+data[i].orgid+'">'+data[i].orgname+'</option>';
}
$('#orgname').html(opt);
}
loadinfo();
}
});
}
在单位信息加载成功之后，在执行相关的回复显示操作，这样问题就迎刃而解了
源代码
js文件
$(function(){
//获取单位信息
load_area_option();
//单位信息选择之后可以继续选择单位人员
document.getElementById("orgname").onchange = function(){
var orgid = this.options[this.selectedIndex].value;
getUserListByOrgId(orgid);
}
})
//获取单位信息
function load_area_option(){
$.ajax({
type:"get",
url:root + "/getOrgList.action",
success:function(result){
if(result.total > 0){
var data = result.data;
//var opt = '<option value="0" selected>全部</option>';
var opt = "";
for(var i = 0 ; i < data.length; i++){
opt += '<option value="'+data[i].orgid+'">'+data[i].orgname+'</option>';
}
$('#orgname').html(opt);
}
loadinfo();
}
});
}
//根据orgId,获取相关人员信息
function getUserListByOrgId(orgId){
$.ajax({
type:"post",
url:root + "/getUsernameByOrgId.action",
data:{orgid:orgId},
success:function(result){
var data = result.data;
//var opt = '<option value="0" selected>全部</option>';
var htm = "";
for(var i = 0 ; i < data.length; i++){
htm += '<option value="'+data[i].userid+'">'+data[i].username+'</option>';
}
$('#username').html(htm);
}
});
}
//根据orgId,获取相关人员信息
function getUserlist(orgId){
$.ajax({
type:"post",
url:root + "/getUsernameByOrgId.action",
data:{orgid:orgId},
success:function(result){
var data = result.data;
//var opt = '<option value="0" selected>全部</option>';
var htm = "";
for(var i = 0 ; i < data.length; i++){
htm += '<option value="'+data[i].userid+'">'+data[i].username+'</option>';
}
$('#username').html(htm);
}
});
}
//保存按钮
function saveOrUpdate(){
var orgid = $('#orgname option:selected').val();
var orgname = $('#orgname option:selected').text();
var userid = $('#username option:selected').val();
var username = $('#username option:selected').text();
var reply_content = $('#reply_content').val();
var reply_id = $("input[name='reply_id']").val();
$.ajax({
type:"post",
url:root + "/updateSwReplyByid.action",
//data: $('#fom').serialize()+"&orgid="+orgid+"&orgname="+orgname+"&userid="+userid+"&username="+username,
data:{
reply_id:reply_id,
orgid:orgid,
orgname:orgname,
userid:userid,
username:username,
reply_content:reply_content
},
success:function(result){
if(result !=null){
layer.msg('更新成功！', {icon:1});
}else{
layer.msg('更新失败！', {icon:2});
}
}
});
}
//关闭按钮
function close_layer(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
//加载sw_reply
function loadinfo(){
var reply_id = $("input[name='reply_id']").val();
$.ajax({
type:"post",
url: root+"/getSwReplyById.action?replyid="+reply_id,
success:function(result){
var obj = result.data;
getUserlist(obj.orgid);
$("#username").val(obj.userid);
$("#orgname").val(obj.orgid);
$("textarea[name='reply_content']").val(obj.reply_content);
}
});
}
JSP文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String root = request.getContextPath();
String reply_id = request.getParameter("reply_id");
%>
<!doctype html>
<html class="no-js">
<head>
<jsp:include page="../../include/include.jsp" flush="true" />
<!-- jquery -->
<script src="<%=root%>/assets/js/jquery.min.js" type="text/javascript"></script>
<!-- 新增组织相关操作js -->
<script src="<%=root%>/jsp/item_reply/item_replyedit2.js" type="text/javascript"></script>
<script src="<%=root%>/assets/js/common.js" type="text/javascript"></script>
<link href="<%=root%>/assets/css/common.css" type="text/css" rel="stylesheet">
<style>
input {
width: 100%;
border: 0px !important;
}
textarea {
width: 100%;
height: 100%;
border: 0px !important;
resize: none;
}
select {
width: 100%;
}
.lable_td{
width:18%;
}
</style>
</head>
<body>
<div class="btndiv">
<a class="listbtn" onclick="saveOrUpdate();"> 保存 </a>
<a class="listbtn" onclick="close_layer();"> 关闭 </a>
</div>
<div style="float: left; width: 100%; padding-top: 5px; padding-left: 10px;">
<form id="fom">
<input type="hidden" name = "reply_id" value="<%=reply_id %>"/>
<table>
<tr>
<!-- 这里设置单位的选择 -->
<td class="lable_td">单位选择：</td>
<td>
<select id="orgname" name="orgname">
</select>
</td>
<td class="lable_td">人员选择：</td>
<td>
<select id="username" name="username">
</select>
</td>
</tr>
<tr>
<td class="lable_td">回复修改：</td>
<td colspan="3" style="height:200px;width:90%;word-break:break-all;line-height:20px;">
<textarea id="reply_content" name="reply_content">
</textarea>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
在文章的最后提一句，因为异步加载，想要的东西还没有显示出来，就进行回填，发现找不到值与之对应，还有更简单的一种方法
async : false,
设置异步加载为false
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
