项目中碰到的Ajax相关的问题记录

需求描述:

第一步:通过controller1,进入到前端页面1,输入计算参数,点击按钮,对数据进行处理;

第二步:通过Ajax异步操作进入到controller2,得到数据之后,返回给Ajax,在success函数中进行显示,或者带数据进行页面跳转;

第三步:最后在新的页面进行数据展示。

问题一:Ajax参数问题(ps:要搞清楚各参数代表的意义,否则无从下手):

  这里列出几个比较常用的参数:(.ajax,.get,.post,.getJson几种方法基本差不多)

  url: (String) 请求的HTML页的url地址;

  type:(String) 请求方式,默认GET。注意其他的HTTP请求方法,例如PUT和DELETE也可以使用,但仅部分浏览器支持;

  data:(Object或者String)发送到服务器的数据,如果不是字符串数据,将自动转换为字符串数据;

  dataType:(String)服务器端返回内容的格式,包括xml、html、script、json、jsonp 、jQuery;

  success:(Function),需要注意的是:要将data传到要跳转页面的时候,根据需求进行转码。    

function(data,textStatus){
                    //data是服务器返回的数据
                    //textStatus是返回是否成功的状态,成功为"success",失败为"failure"
                    //data类型可能是xmlDoc、jsonObj、html、text等等。
               this//调用本次Ajax请求时传递的options参数         //在获取返回来的数据有可能会用到的JSON.stringify(...)
}            

  error:(Function),可以查看错误的信息。

function (XMLHttpRequest, textStatus, errorThrown) {
                alert("数据错误!"
                    +"\n请求对象: " + XMLHttpRequest
                    +"\n错误类型: " + textStatus
                    +"\n异常对象: " + errorThrown);
}

问题二:Ajax中提交表单以及将返回的数据传递到要跳转的页面中进行显示

(1)提交表单的时候,如果有form表单,则不需要指定form表单的action属性;

<form id="Form" action="#"></form>

<input type=button name="submit" value="提交"/>

(2)数据通过get方式放在要跳转的地址中:  

window.location.href = ‘跳转的目标地址‘+data;       //有可能需要对data进行编码,尤其是data中带有特殊字符的url解析器解析不了,使用encodeURIComponent进行处理。

注意:通过

<input id="result" type="hidden" name="result" value="">
在js中对value进行评估:
$("#result").val(data);         //data为Ajax返回的数据

上面的方式,并没有成功的将数据带回到controller1中。所以就选择了在success中进行跳转,将数据带回controller1中,然后在后端进行最后的跳转,显示数据。

最后,有关的一些注意事项:

关于上述跳转的注意事项

1、ajax只接受最后返回的值,不会响应跳转请求更改浏览器地址栏地址转向的,需要用js判断ajax的返回值是否要跳转,然后设置location.href实现跳转。

2、ajax异步请求struts的action只会返回所请求页面的html源代码,这样请求是不会跳转的,这种用法只是在替换页面局部html时使用。

3、在springMVC框架中,当controller层方法返回String类型的时候默认是进行页面跳转,这时候后台使用return时ajax接收到的并不是后台返回的某个字符串或状态码,而是整个html对象,这时可以在后台的方法上添加注解 @ResponseBody,之后返回的是对象数据,而不是整个html页面。

4、无法从ajax函数外部获取ajax请求到的数据,在需要使用数据的组件之前,先在ajax回调函数中使用localstorage.setItem()将数据储存在本地,在组件中使用localstorage.getItem()调用。

在此过程中尝试在componentWillMount 中用 setState 来传递数据,但是报错,错误的大致内容是 setSate 必须在component 的 mounting和mounted状态下才能使用。

问题三:在解决问题的过程中,遇到了@RequestMapping @ResponseBody 和 @RequestBody之间的区别可以查看原文:https://blog.csdn.net/ff906317011/article/details/78552426简单概括一下:[email protected]:用来处理请求地址映射的注解,可用于类或方法上。此处需注意@RequestMapping用在类上可以没有,但是用在方法上必须有。[email protected] :注解表示该方法的返回的结果直接写入 HTTP 响应正文(ResponseBody)中,一般在异步获取数据时使用,                    通常是在使用 @RequestMapping 后,返回值通常解析为跳转路径,加上 @Responsebody 后返回结果不会被解析为跳转路径,而是直接写入HTTP 响应正文中。[email protected]:将 HTTP 请求正文插入方法中,使用适合的 HttpMessageConverter 将请求体写入某个对象。

  

原文地址:https://www.cnblogs.com/Archie2018/p/12200652.html

时间: 2024-10-01 07:28:01

项目中碰到的Ajax相关的问题记录的相关文章

项目中碰到的问题及解决方法记录

1. xml 3 字节的 UTF-8 序列的字节 3 无效 在STS中,将项目自动部署到tomcat 7并启动,发现启动过程中控制台打印出错误:3 字节的 UTF-8 序列的字节 3 无效 参考此文:https://my.oschina.net/tomJune/blog/673824 首先尝试删掉中文,发现无效,然后在pom.xml中尝试添加properties也不行,最后逐个xml把UTF-8改成了UTF8就好了,对就是去掉个减号而已. 2. 静态资源路径不正确 终于能启动tomcat了,但发

项目中使用的ajax异步读取数据结构设计

设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生成纯数据. ajax异步读取 使用了jQuery.ajax,通过ajax POST方式请求后台处理ashx页面,并传递相关参数. ashx 完成动态加载用户控件,并根据接收的参数对控件的属性进行赋值. 加载控件,借助于博客园老赵的一篇博文,链接找不到了,以后再补. public class View

项目中碰到的各种错误

ios小白,记录下项目中碰到的各种异常错误 1.NSGenericException 出现这个异常是因为我在快速枚举 for in 语句中对array进行了删除操作. 正确的移除方法如下 a.创建一个NSMutableIndexSet b.遍历数组保存要删除的index  c.调用 removeObjectsAtIndexs 接口

如何在项目中使用composer的相关功能

最近要在公司的magento项目中引用第三方库,用了composer来进行管理,composer还是非常方便的: 1.在应用的根目录下添加文件:composer.json {    "name": "yiisoft/yii2-app-basic",    "description": "Yii 2 Basic Application Template",    "keywords": ["yii2

text-align:justify在项目中碰到的问题

最近在项目中,使用了一个新的样式属性:text-align:justigy,这个属性在使用过程中遇到了一些小异常,现在总结下.  text-align有一个属性值为justify,为对齐之意.其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行).在移动端的时候,文本显示就比较的重要.我们比较下默认样式:left和justify样式: 同一个文本显示样式如下: 下面截图是文本中一段英文左对齐的右边缘截图:我们发现参差不齐. 使用justify后,文本显示如下: 右侧完全对齐了,也就是整

Vue项目三、项目中碰到的问题详解

一.组件的划分创建 方法一: 把页面上需要复用的模块,拆分成组件.比如,页面的header.footer.面包屑.弹出框等拆分成组件.所以在src中应该有一个文件夹(components)专门放这些会复用的组件. 页面中不被复用的模块,比如content主体内容.会被做为一个主页面,在这个主页面中会去导入可复用组件组成一个可以被用户浏览的完整网页.所以在src中应该有一个文件夹(views)专门放这些主体页. 方法二: 把页面上所有的模块能拆分的都拆分成小组件.那些复用的组件,比如页面的head

oracle性能优化(项目中的一个sql优化的简单记录)

在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个需要查询很慢的sql的优化过程,如果有更好的方案,请在下面留言交流. 很多文章都有关于sql优化的方法,这里就不一一陈述了.如果有需要可以查看博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/79101122 SELECT T.YHBH,

Jquery和Javascript 实际项目中写法基础-ajax和json (3)

一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script&

grails项目中(DB的相关操作)

save:保存Domain对象的数据到对应的库表中(可能是insert也可能是update) findBy: 动态方法,查找并返回第一条记录,方法名可以变化 eg:findByName("Tom") 会返回所有name属性为Tom的对象(只返回第一条记录) findByNameAndPassword("Tom","Mot")会返回所有name属性为"Tom"并且password属性为"mot"的对象 fin