ajax值数据传递

最新推荐文章于 2021-08-05 16:37:47 发布
最新推荐文章于 2021-08-05 16:37:47 发布
阅读量751 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_niu_1/article/details/8864979
版权 
发送xml数据
public class Person {
	private int id;
	private String name;
	private int age;
	private String address;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	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 getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public static void main(String[] args) {
		
	}
}
 

package json;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

public class XMLServlet extends HttpServlet {

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
			//发的是xml数据，设置响应头信息
			resp.setContentType("text/xml;charset=utf-8");
			resp.setHeader("praga", "no-cache");
			resp.setHeader("cache-control", "no-cache");
			//
			String name = req.getParameter("name");
			Person person = new Person ();
			if ("zhangsan".equals(name)) {
				person.setId(1);
				person.setName("zhangsan");
				person.setAddress("beijing");
				person.setAge(30);
			}else {
				person.setId(2);
				person.setName("lisi");
				person.setAddress("shanghai");
				person.setAge(20);
			}
			//使用dom4j生成xml文档
			Document document = DocumentHelper.createDocument();
			Element rootElement = document.addElement("users");
			rootElement.addComment("This is a comment");
			Element userElement = rootElement.addElement("user");
			Element idElement = userElement.addElement("id");
			Element nameElement = userElement.addElement("name");
			Element ageElement = userElement.addElement("age");
			Element addressElement = userElement.addElement("address");
			idElement.setText(person.getId()+"");
			nameElement.setText(person.getName());
			addressElement.setText(person.getAddress());
			ageElement.setText(person.getAge()+"");
			PrintWriter writer = resp.getWriter();
			OutputFormat format = OutputFormat.createPrettyPrint();
			format.setEncoding("utf-8");
			//输出到客户端
			XMLWriter xmlWriter = new XMLWriter (writer,format);
			xmlWriter.write(document);
			writer.flush();
	}
}




<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'xml.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">
	-->
	<script type = "text/javascript" src="jquery/jquery-1.4.4.js"></script>
	<script type = "text/javascript">
	$(document).ready (function (){
		$("#button1").bind ("click",function (){
			$.ajax({
				type:"POST",
				url:"XMLServlet",
				dateType:"xml",
				data:{name:$("#name").val()},
				success:function (returnedDate){//returnedDate从服务器传来的数据
					var id = $(returnedDate).find("id").text();
					var name = $(returnedDate).find ("name").text();
					var age = $(returnedDate).find ("age").text();
					var address = $(returnedDate).find ("address").text();
					var html = "<table width = '100%' border = '1'><thead><tr><td>id</td><td>name</td><td>age</td><td>address</td></tr></thead><tbody><tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tbody></table>";
					$("#content table:eq(0)").remove();
					$("#content").append($(html));
				}})
			});
	});
	</script>
  </head>
  
  <body>
  		<select id = "name">
  			<option value = "zhangsan">zhangsan</option>
  			<option value = "lisi">lisi</option>
  		</select>
  		<input type = "text" name = "param1" id = "param1" /><input name = "param2" type = "text" id = "param2" /><input type = "button" value = "get the text from servlet" id = "button1"/>
  		<div id = "content">
  			
  		</div>
  </body>
</html>

/**************************************
直接送post方法向服务器发送数据
//1:请求的路径2：请求的数据3:回调函数
				$.post("XMLServlet",{
					name:$("#name").val()
				},function (returnedDate,status) {
					var id = $(returnedDate).find("id").text();
					var name = $(returnedDate).find ("name").text();
					var age = $(returnedDate).find ("age").text();
					var address = $(returnedDate).find ("address").text();
					var html = "<table width = '100%' border = '1'><thead><tr><td>id</td><td>name</td><td>age</td><td>address</td></tr></thead><tbody><tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tbody></table>";
					$("#content table:eq(0)").remove();
					$("#content").append($(html));
				})
***************************************/





如果用get方法向服务器传送数据，将$.post 改成$.get
其实底层都是调用$.ajax()来实现的。

package model;

import java.util.List;

public class People {
	private int id;
	private String name;
	private Address address;
	private List<People> friends;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Address getAddress() {
		return address;
	}
	public void setAddress(Address address) {
		this.address = address;
	}
	public List<People> getFriends() {
		return friends;
	}
	public void setFriends(List<People> friends) {
		this.friends = friends;
	}
}




package json;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import model.Address;
import model.People;

public class GsonServlet extends HttpServlet {

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
			//!!!!!!important
			resp.setContentType("application/json");
			resp.setHeader("praga", "no-cache");
			resp.setHeader("cache-control", "no-cache");
			List<People> list = new ArrayList<People> ();
			People people1 = new People ();
			Address address1 = new Address ();
			address1.setHomeAddress("beijing");
			address1.setCompanyAddress("shanghai");
			people1.setId(1);
			people1.setName("zhangsan");
			people1.setAddress(address1);
			
			People person1 = new People ();
			person1.setId(5);
			person1.setName("zhangsan1");
			
			People person2 = new People ();
			person2.setId(6);
			person2.setName("zhangsan2");
			
			List<People> list1 = new ArrayList<People>();
			list1.add(person1);
			list1.add (person2);
			
			people1.setFriends(list1);
			/*****************************************/
			People people2 = new People ();
			Address address2 = new Address ();
			address2.setHomeAddress("tianjing");
			address2.setHomeAddress("jiangshu");
			people2.setId(2);
			people2.setName("lisi");
			people2.setAddress(address2);
			List<People> list2 = new ArrayList<People>();
			
			People person3 = new People ();
			person3.setId(1000);
			person3.setName("lisi2");
			
			People person4 = new People ();
			person4.setId(2000);
			person4.setName("lisi3");
			
			list2.add(person3);
			list2.add(person3);
			people2.setFriends(list2);
			list.add(people1);
			list.add(people2);
			//使用Gson转化成json数据
			Gson gson = new Gson ();
			String result = gson.toJson(list);
			System.out.println(result);
			PrintWriter out = resp.getWriter();
			out.println(result);
			out.close();
	}
}




<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'json2.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">
	-->
	<script type = "text/javascript" src="jquery/jquery-1.4.4.js"></script>
	<script type = "text/javascript">
		$(document).ready (function () {
			$("input:eq(0)").click (function () {
				$.get ("GsonServlet",{},function (returnedData,status){
					var html = "<table border = '1' width = '80%'><thead><tr><th>id</th><th>name</th><th>homeaddress</th><th>companyaddress</th></tr></thead>";
					for (var i = 0;i < returnedData.length;i++) {
						var people = returnedData[i];
						var id = people.id;
						var name = people.name;
						var homeaddress = people.address.homeAddress;
						var companyaddress = people.address.companyAddress;
						html+="<tr align = 'center'><td>"+id+"</td><td>"+name+"</td><td>"+homeaddress+"</td><td>"+companyaddress+"</td></tr>"
					}
					html+="</table>";
					$("#content table").remove();
					$("#content").html(html);
				});
			});
		});
	</script>
  </head>
  
  <body>
    	<input type = "button" value = "get the data of json from the server" />
    	<div id = "content">
    		
    	</div>
  </body>
</html>















                

        

        

    




    

      

        

            

              
                
                  baother0
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
ajax传递值

				
			

			

				

					Chao Yu    -   Smile in the Sunshine
				

				

					06-07
					
					698
					
				

			

		

		

			
				
前台传给后台：var warehouseReceiptJsonStr = JSON.stringify(receipt);
        var actionUrl = ($("#"+formId).attr("action"));
        $.ajax({
            url:actionUrl,
            type : "post",

			
		

	



                

              
                



	

		

			

				
					
java 用ajax java后台传回值

				
			

			

				

					
				

				

					09-20
					
					197
					
				

			

		

		

			
				
t=UTF-8");
    if (null != str)
      try {
        response.getWriter().write(str);
      } catch (IOException e) {
        e.printStackTrace();
      }
  }

  public static final void sendAsText(HttpServletResponse response, String str)
  

			
		

	



                


  
              

                


	

		

			

				
					
java+jquery+ajax+json实现传值

				
			

			

				

					eddie_520的专栏
				

				

					04-11
					
					1596
					
				

			

		

		

			
				
a.jsp
$.ajax({
            type: "GET",
            url:"b.jsp",//同样这可以提交到java.do
            data:{GoodsID:value},
            dataType:'json',
            success:function(data){

			
		

	





	

		

			

				
					
在java中的ajax传值时的乱码问题

				
			

			

				

					weixin_30633405的博客
				

				

					01-13
					
					80
					
				

			

		

		

			
				
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+re...

			
		

	



		

			
		



	

		

			

				
					
解决AJAX传值乱码问题

				
			

			

				

					JAVA学习专用BLOG
				

				

					08-29
					
					4756
					
				

			

		

		

			
				
 我的ajax前台程序： var xmlhttp;  function createXMLHttpRequest() {      if (window.ActiveXObject) {          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      }      else if (window.XMLHttpRequest) {

			
		

	





	

		

			

				
					
Bootstrap进度条与AJAX后端数据传递结合使用实例详解

				
			

			

				

					08-30
				

			

		

		

			
				
Bootstrap进度条与AJAX后端数据传递结合使用实例详解  Bootstrap进度条与AJAX后端数据传递结合使用是Web开发中常见的技术结合，通过Bootstrap进度条展示数据加载的进度，提高用户体验，AJAX技术则可以实现在页面不...

			
		

	





	

		

			

				
					
$.ajax json数据传递方法

				
			

			

				

					10-30
				

			

		

		

			
				
下面我们将详细探讨`$.ajax` 和JSON数据传递的方法。  1. **$.ajax方法的使用**  `$.ajax` 函数接受一系列参数，包括`type`, `url`, `data`, `dataType`, `beforeSend` 和 `success` 等。在给出的示例中：  - `type`...

			
		

	





	

		

			

				
					
jQuery Ajax向服务端传递数组参数值的实例代码

				
			

			

				

					10-19
				

			

		

		

			
				
以下是使用jQuery Ajax传递数组参数值的三种不同方法：  ### 方法一：通过表单元素使用serialize()方法  首先，构造表单元素，然后使用jQuery的`serialize()`方法来获取表单元素的值，并将其作为查询字符串传递给...

			
		

	





	

		

			

				
					
Ajax中数据传递的另一种模式 javascript Object Notation思想（JSON）

				
			

			

				

					10-28
				

			

		

		

			
				
它是Ajax技术中数据传递的另一种重要模式，其简洁性和高效的解析特性，使其成为当今Web开发中不可或缺的一部分。随着Web技术的不断发展和应用需求的日益增长，JSON的作用和重要性将会更加凸显。

			
		

	





	

		

			

				
					
ajax异步读取后台传递回的下拉选项的值方法

				
			

			

				

					10-18
				

			

		

		

			
				
### AJAX异步读取后台传递回的下拉选项的值方法  #### 知识点说明：  1. **AJAX技术介绍**  AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与...

			
		

	





	

		

			

				
					
Ajax向Servlet传值小实例

				
			

			

				

					我的CSDN
				

				

					09-19
					
					2万+
					
				

			

		

		

			
				
Ajax向Servlet传值小实例通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。下面是使用Ajax向后台Servlet传递JSON格式的数据的一个小实例。Ajax接收后台Servlet传过来的json数据请参考：http://blog.csdn.net/u010371710/article/details/46

			
		

	





	

		

			

				
					
java获取ajax传值,java取ajax传值

				
			

			

				

					weixin_34304538的博客
				

				

					08-05
					
					772
					
				

			

		

		

			
				
java取ajax传值[2021-02-03 11:32:37]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教解决java的ajax提交返回值中文乱码的方法：1、在RequestM...

			
		

	





	

		

			

				
					
ajax三种传值方式

				
			

			

				

					swimming_in_IT_的博客
				

				

					09-25
					
					1万+
					
				

			

		

		

			
				
$.ajax({    ajax传值方式：1，url后面直接跟参数，2,headers:传值方式。3，body:传值方式，也就是data:{中间是json字符串/json对象}
                            url: restApiServer+ 'user?name=' + name, 
 服务端取值：request.query.name

			
		

	





	

		

			

				
					
java接收ajax传参_Ajax传值以及接受传值，@ResPonseBody 和 @RequestBody

				
			

			

				

					weixin_34475951的博客
				

				

					03-02
					
					909
					
				

			

		

		

			
				
Ajax对于Java编程人员开说可是很重要的，可以说是必会的。Title// 第二步：使用Jquery的 ajax (被封装过的)来请求数据地址$.ajax({type:'post',url:'api/data.json',data:{},success:function (res) {console.log(res)}})// url: 填写的内容的是  后台的数据接口// type: 本次发送...

			
		

	





	

		

			

				
					
ajax向后端传值

				
			

			

				

					OneSeek的博客
				

				

					07-17
					
					2356
					
				

			

		

		

			
				
$.ajax({
			url:'input'
			
			,data:{'json':JSON.stringify(json)}
			,type:"POST"

			,success:function(res) {
				alert(res);
			}
			,error:function () {
				alert("查询失败");
			}
		});

主要注意：

要把字符串...

			
		

	





	

		

			

				
					
Ajax传值 简述方法(前后端传值)

					
热门推荐

				
			

			

				

					想做一只程序猿。
				

				

					12-30
					
					2万+
					
				

			

		

		

			
				
Ajax传值的过程
提示：我是个小白，写博客只是为了保存自己总结的东西，若有错误请指正，共同学习！！感谢！！！

文章目录前言一、使用前提1. 必须要先在前端引入jQuery。2.Ajax要写在<script> </script> 标签里面。二、使用情况1.Ajax传值  前端传值到后端接收  （传个id到后端，根据id删除数据）有两种方法1.将要传递的值放在ajax的data属性里，作为属性值传递；2.将要传递的值加在url 路径的后面，用 “?getId= “+getid 连接，

			
		

	





	

		

			

				
					
木子-前端-ajax传值与接收最简单的方式

				
			

			

				

					紅塵的博客
				

				

					12-17
					
					7323
					
				

			

		

		

			
				
之前写过一篇，结果过了这么1年多，我发现我自己都用着不太对劲，所以特地重新写一份

前台：

    首先我们需要引入jquery.js或者ajax.js  但是两个不可以兼容，因为jquery中本身包含了ajax的方法，所以我个人习惯直接引入jquery。html和jsp的引入方式略有区别jsp因为是在html的基础上做了改进所以引入可以</>标签自己结束。而htm了引入j...

			
		

	





	

		

			

				
					
PHP+jQuery AJAX传递JSON数据实战教程

				
			

			

				

					
				

			

		

		

			
				
"该文档提供了一个使用PHP和jQuery的AJAX技术传递JSON数据的简单示例，通过HTML表单收集用户输入，然后使用jQuery的AJAX函数将数据以POST方式发送到服务器端PHP脚本，PHP脚本处理数据并以JSON格式返回。"  在Web开发...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值