Ajax 传JSON，请求出错实践笔记

最新推荐文章于 2023-05-10 16:08:03 发布
最新推荐文章于 2023-05-10 16:08:03 发布
阅读量521 收藏
点赞数
分类专栏： web前端 文章标签： ajax json servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_Bei/article/details/50837667
版权

对于Ajax，有接触的人应该或多或少有接触，学习的话，网上有很多资源，这里就不说了。想说的是要弄明白Ajax的实质，然后要理解每个参数所起到的作用。

       对于Json是轻量级是轻量级的文本数据交换格式，使用js语法，要将后台的集合对象传递到后台就可以使用JSON。

由于前端写得不多，今天在做一个系统时，用到了JSON+Ajax，是将后台servlet中的List集合转成json对象，然后前台用js写ajax进行接收解析，但是在前台一直取不到json数据，找了很久，Bug是出了Ajax请求响应上面。对Ajax请求实质很模糊，下面用小例子来说明下：

使用的是原生态的servlet+jsp+js+Ajax+json.Ajax使用是想通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。常用格式为：

$ajax.({

url：当前页地址。发送请求的地址。

  type：“POST”/"GET"

  data: 要向后台传送的数据，

  dataType: 数据类型，

  success:function(msgt){},

           error:function(){}

})

自己就是在url跟servlet请求跳转弄混了，来看下面：

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 javax.servlet.http.HttpSession;

import net.sf.json.JSONArray;


//建一个servlet
public class testServlet extends HttpServlet{
	
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
	
				List<User> user = new ArrayList<User>;
				ProntWriter out = resp.getWriter();
				//为了节省时间，加入了三个同样的对象
				for(int i = 0;i<3;i++ ){
						User ur = new User();
						ur.setName("tom");
						ur.setPhone("1001");
						user.add(ur);
				}		
				<pre name="code" class="html">				//将User转换为JSON格式
				JSONArray json = JSONArray.fromObject(user);
				out.write(json.toString());
				//req.getRequestDispatcher("xx.jsp").forward(req, resp);

}//User 类

<pre name="code" class="java">public class User{
private String name;
private int phone;
//省略getter and setter.......
}


 

<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">xx.jsp页面：</span>
 

<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);"></span><pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 

<title></title><meta http-equiv="pragma" content="no-cache" />
 

<meta http-equiv="cache-control" content="no-cache" /
 

><meta http-equiv="expires" content="0" />
 

<link rel="stylesheet" href="css/reset.css" type="text/css">
 

<link rel="stylesheet" href="css/login.css" type="text/css">
 

</head>
 

<body>
 

<div class="wrapper"><tr>
 

<td align="right" style="vertical-align: middle;">名字</td>
 

<td><input type="text" value="user_id"/></td></tr>
 

<tr><td align="right" style="vertical-align: middle;">电话</td>
 

<td><input type="text" value="phone"/></td></tr
 

><tr><td colspan="2" align="center"><button class="btn btn-primary" type="button" >显示</button></td></tr>
 

</div><script type="text/javascript" src="js/jquery-1.11.2.min.js">
 

</script><script type="text/javascript" src="js/login.js"></script>></body></html>
 

 

 

 

 

xx.js
 


 
 

 

$(".btn").click(function(){<span style="font-family: Arial, Helvetica, sans-serif;">		</span>
 

		$.ajax({
			url : "xx.do",
			type : "POST",
			dataType : "json",
		  <span style="white-space:pre">	</span>success:function(msg){
					$("#user_id").html(msg[0].name);
					$("#phone".html((msg[0].phone));
		    	
		  <span style="white-space:pre">	</span>},
	   <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>error: function(er){
	    	<span style="white-space:pre">		</span>console.log(er);
	   <span style="white-space:pre">		</span> }
		  });
	});
});
 

 例子是简单的取得后台传送过来的json对象，并在页面进行加载显示；在web.xml对servlet进行配置。url为 xx.do ，但是在servlet中加上 

<span style="color:#ff0000;">req.getRequestDispatcher("xx.jsp").forward(req, resp); 进行跳转</span>
 

即：
 

//将User转换为JSON格式
<span style="white-space:pre">	</span>JSONArray json = JSONArray.fromObject(user);
<span style="white-space:pre">	</span>out.write(json.toString());
 

    <span style="color:#ff0000;"> req.getRequestDispatcher("xx.jsp").forward(req, resp);</span>
 

 

 

此时将会拿不到值，因为你的ajax作用的是xx.do，而你在servlet中就已经进行的跳转，跳到了xx.jsp中，所以servlet返回的是在xx.do中，不是在jsp中，所以自己总结的是 假如要在servlet中进行跳转，重定向，那么ajax作用要设置在原先的路径，而不是跳转后的路径。
 


 
 

 
 
  


                

        

        

    

  


    

      

        

            

              
                
                  Y_Bei
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
前端向后端传参报415_Ajax向后台传json格式的数据出现415错误的原因分析及解决方法...

				
			

			

				

					weixin_39848007的博客
				

				

					12-19
					
					1274
					
				

			

		

		

			
				
问题描述：ajax往后台传json格式数据报415错误,如下图所示页面代码function saveUser(){var uuId = document.getElementById("uuid").value;var idCard = document.getElementById("idCard").value;alert(uuId+idCard);// var result = new Ob...

			
		

	



                

            
              



	

		

			

				
					
AJAX学习笔记：什么是AJAX、http协议、AJAX请求发送方法（jQuery，Axios，fetch）、跨域、CORS

					
最新发布

				
			

			

				

					qq_48376006的博客
				

				

					09-16
					
					235
					
				

			

		

		

			
				
几种发送AJAX的方法，跨域问题，CORS等。

			
		

	



              


  
              

                


	

		

			

				
					
$.ajax传JSON数据到后台出现报错问题解决

				
			

			

				

					12-10
				

			

		

		

			
				
代码如下: $.ajax({ url: “../Services.ashx”, type: “POST”, //data: { ‘data’: { ‘typename’: JSON.stringify(typename) }, ‘operationType’: ‘2’ }, data: { ‘data’: typename, ‘operationType’: ‘2’,’nowheight’:nowheight,’nowarea’:nowarea }, success: function (msg) {} })  js代码如上，当data中的‘键’-‘值’对中的值为null（undefined）

			
		

	





	

		

			

				
					
Ajax中使用JSON传输数据

				
			

			

				

					03-01
				

			

		

		

			
				
json.js and json.jar
博文链接：https://terran-li2008.iteye.com/blog/199088

			
		

	



		

			
		



	

		

			

				
					
ajax传输json出错问题

				
			

			

				

					06-22
				

			

		

		

			
				
前端利用ajax请求传输json串出错

			
		

	





	

		

			

				
					
ajax传值到后台失败的问题

				
			

			

				

					php的绯闻女友
				

				

					07-07
					
					971
					
				

			

		

		

			
				
最近写后台的时候，发现我写了一个数组想传进后台，但是后台一直接收不到，经过种种排查，发现是我的数据类型有一定错误。首先我定义了一个data=[],然后将数据以data['commodity_name']=$('input[name="commodity_name"]').val()的方式存入该数组中，但是这样的话并不是数组，好像与object的格式也不太对，最后console.log是这样的：



最外面是[]，这样的数据传不到后台。

更改：


var data = {};
d...

			
		

	





	

		

			

				
					
AJAX请求与响应

				
			

			

				

					m0_59708269的博客
				

				

					05-19
					
					1099
					
				

			

		

		

			
				
一.express框架
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应
    response.send('HELLO EXPRESS');
});

//4. 监听端口启

			
		

	





	

		

			

				
					
Ajax 笔记

				
			

			

				

					weixin_42378852的博客
				

				

					08-09
					
					317
					
				

			

		

		

			
				
Ajax概述
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，增强用户体验感，比如上拉显示更多内容，搜索框提示文字下拉列表，用户登录离开焦点验证表单等场景均用到了ajax技术
ajax的运行环境：需要运行在网站环境中
ajax的运行原理：
ajax相当于浏览器向服务器发送请求和接收响应的代理人，在不影响用户浏览页面的情况下，局部更新页面数据，提高用户体验。

Ajax基本实现步骤
<script>
        // 实例化ajax对象
        var xhr = new XML

			
		

	





	

		

			

				
					
jsp&ajax学习笔记

				
			

			

				

					weixin_44736938的博客
				

				

					06-30
					
					1442
					
				

			

		

		

			
				
jsp&ajax学习笔记

			
		

	





	

		

			

				
					
Ajax中通过json从前端往后端传值时 报错400问题

				
			

			

				

					PangDunJiang的博客
				

				

					02-08
					
					548
					
				

			

		

		

			
				
Ajax中，json不允许其中对象参数的值为空或null的情况出现，否则即报400.
解决： 通过JavaScript进行判断，确定传值是否为空或null；
若为空或null，则赋默认值

function search() {
            var prof_id = $("#prof_id").val();
            if (prof_id == ''){
                prof_id = 0;
            }
            var nam

			
		

	





	

		

			

				
					
List存放map集合通过Ajax传入前台出错Could not write JSON: java.lang.Long cannot be cast to java.lang.

				
			

			

				

					刘刘刘刘刘牛皮的博客
				

				

					05-27
					
					2217
					
				

			

		

		

			
				
出错原因：

 后台返回值为List<Map<String,String>>  通过Ajax传入前台报错如下：

Could not write JSON: java.lang.Long cannot be cast to java.lang.String; nested exception is com.fasterxml.jackson.databind.JsonMappingException: java.lang.Long cannot be cast to java...

			
		

	





	

		

			

				
					
ajax使用json传参后端接受不到参数，巨坑，已解决

				
			

			

				

					qq_41566219的博客
				

				

					05-26
					
					1万+
					
				

			

		

		

			
				
今天 遇到了一个很神奇的问题，我使用ajax向后端传输数据的时候，发现使用json格式无法传输，后端要么报400参数错误，要么就是接收不到参数；
问题代码
前端代码：
<body>
<input type="button" id="but" value="测试" style="width: 200px;height: 200px"/>
</body>
<script type="text/javascript" src="http://code.jquery.com

			
		

	





	

		

			

				
					
Ajax数据传输失败解决方法

				
			

			

				

					susu的博客
				

				

					03-17
					
					1989
					
				

			

		

		

			
				
很奇怪，ajax里只在传输的 json 对象变量名为 data 时能成功传输数据
为 data2 或其他变量名时会传输失败
具体原理之后再研究！
var data = [{"name":"hid", "value":data1.h_id}];
$.ajax({
  url: '../student/sHomeworkGet.php'
  ,type: 'POST'
  ,dataType: 'json'
  ,async: false
  ,data
  ,success: function(json) {

			
		

	





	

		

			

				
					
【随手笔记】jsonobject无法在服务器的servlet中运行的一个解决方法

				
			

			

				

					Soothingday的日常小屋
				

				

					02-22
					
					769
					
				

			

		

		

			
				
通过servlet连接安卓和服务器之间的json传递，但是安卓上面一直提示找不到对应的servlet并报了500错误，于是我检查了安卓和servlet的每一部分的代码最后定位到只要创建了jsonobject就报500错误，经过很久的debug后最后我尝试着直接在servlet上建立一个json的string来看是否有问题，结果发现浏览器上面直接显示找不到json的包，我之前是已经将这个包导入到项目...

			
		

	





	

		

			

				
					
ajax前台和后台json数据传输问题

				
			

			

				

					go_pkqL00的博客
				

				

					03-03
					
					642
					
				

			

		

		

			
				
前台js代码如下：
		&amp;amp;lt;!--页脚结束--&amp;amp;gt;
	&amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;amp;gt;
	// 页面初始化时加载用户数据
	$(document).ready(function() {
		// 将请求提交到哪里
		var url = &amp;quot;../user/info.do&amp;

			
		

	





	

		

			

				
					
1.ajax提交JSON数据,报类型转换错误

				
			

			

				

					weixin_44178072的博客
				

				

					05-10
					
					392
					
				

			

		

		

			
				
前端ajax post方式提交JSON数据,data: {属性1: 数据1, 属性2: 数据2},spring mvc使用@RequestBody进行接收,首先出现不支持application/x-www-form-urlencoded的错误,修改提交的contentType属性application/json,报错类型转换错误信息:属性1=数据1&属性2=数据2。

			
		

	





	

		

			

				
					
ajax url 路径写法

					
热门推荐

				
			

			

				

					°还未来的博客
				

				

					04-28
					
					7万+
					
				

			

		

		

			
				
比如你的页面路径是：http://localhost:8080/projectname/resource/index.html
url请求最后加.do是为了服务器区分这个请求是静态资源还是servlet请求（后边有.do就是servlet请求）

1、相对于网站根目录可以用"/"开始 (根目录是指服务器的根目录，不是你项目的根目录)


$.ajax({
    url:"/getData.do"...

			
		

	





	

		

			

				
					
java json请求_java 通过发送json,post请求,返回json数据的方法

				
			

			

				

					weixin_28681719的博客
				

				

					02-12
					
					263
					
				

			

		

		

			
				
import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.InputStream;import java.io.InputStreamReader;import java.io.OutputStream;import java.net.HttpURLConnection;import java.net....

			
		

	





	

		

			

				
					
Ajax与JSON基础：异步服务器请求

				
			

			

				

					
				

			

		

		

			
				
本资源主要介绍了如何使用Ajax建立到服务器的请求以及Ajax和JSON的基础知识，包括Ajax的基本概念、工作原理和与传统Web应用的区别，同时提到了在数据传输中使用JSON的重要性。  Ajax基础 Ajax，即异步JavaScript和...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值