ajax+jsp通过post请求后台数据的简单应用

最新推荐文章于 2024-07-25 12:41:07 发布

code_aJack

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量3.3k

点赞数 2

文章标签： ajax jsp 数据 Java 前端技术

本文链接：https://blog.csdn.net/code_aJack/article/details/102827370

版权

ajax的post请求后台数据的简单应用
首先，先在Java里创建你的实体类-JavaBean

在这里插入代码片

package com.entity;

public class Admin {
	private int id;
	private String name;
	private String real_name;
	private String password;
	private String dapartment;
	private String remarks;
	
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getReal_name() {
		return real_name;
	}
	public void setReal_name(String real_name) {
		this.real_name = real_name;
	}
	public String getDapartment() {
		return dapartment;
	}
	public void setDapartment(String dapartment) {
		this.dapartment = dapartment;
	}
	public String getRemarks() {
		return remarks;
	}
	public void setRemarks(String remarks) {
		this.remarks = remarks;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String toString() {		
	  return "{" +
	            "\"id\":\""+id+'\"'+
	            ",\"name\":\""+name+'\"'+
	            ", \"real_name\":\""+real_name+'\"'+
	             ",\"password\":\""+password+'\"'+
	            ", \"dapartment\":\""+dapartment+'\"'+	   
	            ", \"remarks\":\""+remarks+'\"'+'}';
	}
}

注意这里的toString()方法，不要写错，这里写错了很容易造成前后台数据交互不成功
然后再创建我们的servlet控制器，
在这里插入图片描述
写一个简单的控制业务的判断方法，注意你的 urlPatterns

给刚刚的实体类对象admin赋予数据这里我们假装给它把数据set出来

private void select(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	 Admin admin=new Admin();
	 admin.setId(1);
	 admin.setName("张三");
	 admin.setPassword("123456");
	 admin.setReal_name("张三丰");
	 admin.setDapartment("管理部");
	 admin.setRemarks("我是一个管理者");     //依次简单赋值，你也可以从数据库取值

	 response.getWriter().write(admin.toString());     //把admin对象数据以json的格式响应到后台
	 	}	
}

到这里已经可以把数据传输到前台了，就看你怎么接收了，
记住我们的路径是：admin.do?action=select
开始编写jsp来接收

这是test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% pageContext.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="../js/jquery-2.2.0.min.js"></script>
<base href="<%=basePath%>">

<title>My JSP 'Test.jsp' starting page</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 rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<script type="text/javascript">
  function ajaxFun(){
  $.ajax({
         type: "post",          //传数据的方式
         url: "${path}/admin.do?action=select", //    path是c标签在前面转发的根路径     用来寻找servlet地址                                                                                                    //data: { first2: first, second2:second },      //传的数据  form表单 里面的数据
         success: function(admin){ 
          var A = eval("("+admin+")");      //传数据成功之后的操作  admin是servlet传过来的数据  这个函数对admin进行处理，让它显示在 输入框中
         $("#id").val(A.id);
         $("#name").val(A.name); 
         $("#real_name").val(A.real_name); 
         $("#password").val(A.password); 
         $("#dapartment").val(A.dapartment); 
         $("#remarks").val(A.remarks);              //分别找到对应的输入框 并且将result的值 传进去
         }
     });
  }
  
 </script>

<body>
	<H1 align="center">Ajax简单应用</H1>
	<div align="center">
		<form id="form">
			       
			<button type="button" onclick="ajaxFun()">触发按钮</button>
			
		</form>
		    <input type="text" id="id"> 
		     <input type="text" id="name">
		     <input type="text" id="real_name"> 
		     <input type="text" id="password"> 
			<input type="text" id="dapartment"> 
			<input  type="text" id="remarks">   // 分别用来接收ajax传到前台的数组   
	</div>
</body>
</html>

点击按钮后即可触发js来获取后台的数据，至于触发的形式和接收的组件就由你自己定义了！

code_aJack

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
ajax+jsp通过post请求后台数据的简单应用

ajax的post请求后台数据的简单应用首先，先在Java里创建你的实体类-JavaBeanpackage com.entity;public class Admin { private int id; private String name; private String real_name; private String password; private String da...
复制链接

扫一扫