Struts2+Jquery+JSON 实现ajax注册信息

落日映苍穹つ 2023-10-16 23:20 13阅读 0赞

一、JSP页面

二、JS脚本

$(function(){
    
        //按钮单击事件
        $("#btn").click(function(){
            //无刷新
            $.ajax({
                type: "POST", //提交方式
                url: "reg.action", //跳转的action 
                data: { //设置提交的数据源
                    name: $("[name='name']").val(),
                    age: $("[name='age']").val(),
                    position: $("[name='position']").val()
                },
                dataType: "json", //设置需要返回的数据类型
                success: function(data){
                    // alert(data);  //弹出来的是文本格式{name:xxx,age:20,position:IT}
                    //将数据转换成json类型  
                    var obj = eval("(" + data + ")");
                    
                    //绑定数据
                    $("#s_name").html(obj.name);
                    $("#s_age").html(obj.age);
                    $("#s_position").html(obj.position);
                    
                },
                error: function(){
                    alert("系统异常，请稍后重试！");
                }
                
            });
            
        });
        
        
        
    });

三、Action类

public class RegAction extends ActionSupport {
    
    	// 返回的结果
    	private String result;
    	// 对应的数据
    	private String name;
    	private int age;
    	private String position;
    
    	public String getResult() {
    		return result;
    	}
    
    	public void setResult(String result) {
    		this.result = result;
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	public int getAge() {
    		return age;
    	}
    
    	public void setAge(int age) {
    		this.age = age;
    	}
    
    	public String getPosition() {
    		return position;
    	}
    
    	public void setPosition(String position) {
    		this.position = position;
    	}
    
    	@Override
    	public String execute() throws Exception {
    		// 将数据存储在map里
    		Map<String, Object> map = new HashMap<String, Object>();
    		map.put("name", name);
    		map.put("age", age);
    		map.put("position", position);
    
    		// 将map转换成json类型数据
    		JSONObject json = JSONObject.fromObject(map);
    
    		// 给result赋值，传递给页面
    		result = json.toString();
    
    		return SUCCESS;
    	}
    }

四、struts.xml

<package name="hang5" namespace="/" extends="json-default">
    		
    		<action name="reg" class="com.hlx.json.RegAction">
    			 <result type="json">
    			 
    			 <param name="root">result</param>
    			 </result>
    		</action>
    
    	</package>

五、页面效果

![Center][]

[Center]: https://img-blog.csdn.net/20160329172504292?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center