ssh + ajax 操作

最新推荐文章于 2021-12-26 20:33:35 发布

绿眼加菲

最新推荐文章于 2021-12-26 20:33:35 发布

阅读量807

点赞数 1

文章标签： ssh ajax 级联操作

本文链接：https://blog.csdn.net/J_Bang/article/details/52198125

版权

一：ajax介绍

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二：ajax的基本实现过程

1、创建XmlHttpRequest对象

2、注册状态监控回调函数 .何时调用。xhr属性readyState每次发生变化时

3、建立与服务器的异步连接

4、发出异步请求

三：案例

ajaxTest.jsp

<%@ page language="java"  pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>  	
	<script type="text/javascript">
	function changePost(obj){
	//1 获得部门id
		var job_name = obj.value;
		//2 发送ajax
		//2.1 核心类 XMLHttpRequest (兼容浏览器)
		var xmlhttp=null;
		if (window.XMLHttpRequest){// code for all new browsers
			xmlhttp=new XMLHttpRequest();
		} else if (window.ActiveXObject){// code for IE5 and IE6
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2.2 设置回调函数
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){								
				//3 显示
				var postSelectObject = document.getElementById("postSelectId");
				postSelectObject.innerHTML = "<option>----请--选--择----</option>";
				var textData = xmlhttp.responseText;
				// 转换成json
				var jsonData = eval("("+textData+")");
				// 遍历
				for(var i = 0 ; i < jsonData.length ; i ++){
					var postObj = jsonData[i];
					var id = postObj.id;
					var salary = postObj.salary;				
					postSelectObject.innerHTML += "<option value='"+id+"'>"+salary+"</option>";
				}							
			}
		};
		//2.3 打开连接
		var url = "${pageContext.request.contextPath}/jobAction_ajaxManager?job_name=" + job_name;
		xmlhttp.open("GET", url);
		//2.4 发送,get请求没有发送请求体内容
		xmlhttp.send(null);		
	}	
	</script>
   
  	</head>  
  <body>
<form namespace="/" action="staffAction_add">
	<table width="88%" border="0" class="emp_table" style="width:80%;">
		<tr>
	    <td width="8%">职务：</td>
	    <td width="62%">
	    	<select id="job_name"  name ="job_name" οnchange="changePost(this)">
	    		<option>----请--选--择----</option>
	    		<option>1</option>
	    		<option>2</option>
	    		<option>3</option>	    		
	    	</select>
	    </td>
	    <td width="8%">职务：</td>
	    <td width="62%">
	    	<select id="postSelectId" name="id">
	    		<option>----请--选--择----</option>
	    	</select>
	    </td>
	  </tr>
	   
	</table>
</form>
  </body>
</html>

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC    
	"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
	"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
 	 <constant name="struts.ui.theme" value="simple"></constant>
     <constant name="struts.devMode" value="true"></constant>
     <constant name="struts.objectFactory" value="spring"></constant>    
     <package name="jobModel" namespace="/" extends="json-default">
        <action name="jobAction_*" class="com.test.action.JobAction" method="{1}">           			
			<result name="ajax" type="json">
    			<!-- 设置值栈名称，让struts获得数据 -->
    			<param name="root">allInfo</param>
    			<!-- 设置对象中哪些属性需要的，支持正则表达式, 语法必须转义  [  ]  .   \d表示匹配下标 -->
    			<param name="includeProperties">
    			\[\d\]\.id
    			</param>
    			</result>			            
          </action>
     </package>
</struts>

action:

  //jsp页面使用ajax
    public String ajaxManager(){
    		String job_name = model.getJob_name() ;
    		List<JobModel> allInfo = jobService.getByJob(job_name) ;
    		System.out.println("--------长度"+allInfo.size());
    		ActionContext.getContext().getValueStack().set("allInfo",allInfo ) ;
    	return "ajax" ;
    }

数据库：

结果：

选择职务为1：

数据库：

这样一个简单的ssh框架的ajax操作就完成了

绿眼加菲

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ssh + ajax 操作

一：ajax介绍什么是 AJAX ？AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案
复制链接

扫一扫