<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://www.yxccc.com"> <struts> <package namespace="/admin" extends="struts-default"> <default-action-ref/> <!-- =================基础跳转====================== --> <action> <result>/WEB-INF/index.jsp</result> </action> </package> <package namespace="/ajax" extends="struts-default"> <!-- =================ajax请求跳转====================== --> <action method="ajax{1}"> </action> </package> </struts>
第六步：编写index.jsp文件，这里做了两种请求，一种是直接请求到字符串，另一种是请求到一组数组格式的数据，但该数据必须要转换成JSON支持的数组，具体如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="https://www.jb51.net/<%=basePath%>" > <title>ajax异步刷新样例测试</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link href="https://www.yxccc.com/css/css.css" type="text/css" /> <script src="https://www.jb51.net/js/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#hh1").click(function(){ $.ajax({ url:"ajax/ajax_String",//请求url data:{sex:$("#txt1").val()}, success:function(data){//请求返回的数据 $("div").html(data);//将数据打印到页面的div中 } }); }); $("#hh2").click(function() { $.ajax({ url: "ajax/ajax_List",//请求url //cache: false, type: "POST", //请求头，这里是post datatype: 'json', //请求数据各式，这里是json格式 success: function(data,status){ data = $.parseJSON(data); //将字符串格式的数据转换成json对象 //这里将option元素移除是考虑到如果在页面不刷新的情况下多次请求，会产生数据累加，不符合业务需求,因此需先删除在增加元素。 $("option").remove(); $("select").append("<option>请选择</option>");//在select元素下添加option子元素。 $(data).each(function(i){ //遍历请求相应的data数据 $("select").append("<option>"+data[i]+"</option>"); }) } }); }); }); </script> </head> <body> <br> <h2>这里是ajax请求Demo，该实例是请求Struts中的action</h2> <br> <button>请求返回常规字符串</button> <button>请求返回JSON格式的List</button><br><br> <div>这里是div元素</div><br> 请选择性别:<select> <option>请选择</option> <option value="nan">男</option> <option value="nv">女</option> </select><br><br> <select> <option>select选择</option> </select> </body> </html>
这样一个简单的ajax请求就已经完成了。