精华内容
下载资源
问答
  • ajax与后端交互

    2020-07-22 14:27:13
    一、首先在前端创建ajax $.ajax({ url:root+'/app/desktop/getData.action', async:false, success:function (data,type) { var obj = eval('('+data+')'); news = obj.newsCount; report = obj.reportCount;

    一、首先在前端创建ajax

    $.ajax({
            url:root+'/app/desktop/getData.action',
            async:false,
            success:function (data,type) {
                var obj = eval('('+data+')');
                news = obj.newsCount;
                report = obj.reportCount;
                userReport = obj.findAccount;
            }
        });
    

    这里设置async为false的目的是可以把json的值赋值给函数外部变量,同时使用eval函数使得可以使用obj.key得到value

    二、在后端处理ajax请求

        @ResponseBody
        @RequestMapping("/getData.action")
        public Object getDate(){
            //平台文章待审查数
            Map map = new HashMap();
            Map<String, Object> params1 = new HashMap<>();
            params1.put("isApprovalSearch",0);
            params1.put("isDeleted",0);
            List<TAppSysNews> news = appSysNewsService.getList(params1);
            int newsCount = news.size();
            return map;
    

    采用@ResponseBody可以直接以json的格式返回给前端,而不需要其他的复杂处理

    三、前端处理返回的json串并且使用

        document.getElementById("approveNews").innerText="待审查的平台文章("+news+")";
        document.getElementById("roadReport").innerText="路况上报记录("+report+")";
        document.getElementById("approveFind").innerText="待审核的用户文章("+userReport+")";
    

    这里是希望把得到的json数值赋值给jsp页面,在jsp中已经有相关的id

    <td width="33%"><a id="approveNews" href=javascript:void(0)></a></td>
    <td width="33%"><a id="roadReport" href=javascript:void(0)></a></td>
    <td><a id="approveFind" href=javascript:void(0)></a></td>
    

    如果是希望只添加文本内容,则使用innerText的方式,如果是希望加入html标签,则需要使用innerHtml

    展开全文
  • 今天小编就为大家分享一篇JS的Ajax与后端交互数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JS的Ajax与后端交互数据

    千次阅读 2017-05-09 17:45:07
    JS的Ajax与后端交互数据

    JS的Ajax与后端交互数据


          JS中很多地方会使用Ajax与后台进行数据交互。


          Ajax是通过http,使得JS与后端进行数据通信,由于

          Ajax的异步特性,可以使多个Ajax请求同时访问后端,

          对页面的局部数据进行逻辑处理,并渲染。


           ajax中前端和后端的交互图:

          


       

        代码实现:

       

    $.ajax({
                    type: "post",
                    url: "http://localhost:8080/ccnb/user/login",
                    data: {
                        "telephone": login_name,
                        "password": login_password
                    },
                    dataType: "json",
    //            contentType:'application/jso
    展开全文
  • JS的Ajax与后端交互数据的实例JS中很多地方会使用Ajax与后台进行数据交互。Ajax是通过http,使得JS后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染...

    JS的Ajax与后端交互数据的实例

    JS中很多地方会使用Ajax与后台进行数据交互。

    Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染。

    ajax中前端和后端的交互图:

    acdfb179bc3bb50fa668d12d6f9c3857.png

    代码实现:

    $.ajax({

    type: "post",

    url: "http://localhost:8080/ccnb/user/login",

    data: {

    "telephone": login_name,

    "password": login_password

    },

    dataType: "json",

    // contentType:'application/json',

    success: function (data) {

    alert(data.Flag);

    alert(data.Msg);

    }

    },

    error: function (XMLHttpRequest, textStatus, errorThrown) {

    alert(XMLHttpRequest.status);

    alert(XMLHttpRequest.readyState);

    alert(textStatus);

    },

    });

    以上这篇JS的Ajax与后端交互数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    时间: 2018-08-07

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

    最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的方案,当然是在后台程序猿大哥的帮助下,我才弄明白了其中的渊源,赶紧记录下来慢慢积累,也希望对大家能有所帮助,还请积极提出意见或建议. 跨域请求需要借助后台代码接收callback回调函数,对json数据进行进一步处理:前台再用ajax请求向服务器发送callback参数,并指定数据格式为jsonp.

    本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.

    ajax的代码,用的是jquery的 ajax: $.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type":"1", //这是你要传给后台的data值 "t":"c4552111" }, dataType: "json", //数据类型是json型 success: funct

    昨天下午做项目遇到一个问题,贴出来方便以后翻阅,也给大家个参考. 问题: 具体做的是个文件导入的功能,导入的功能是成功了,但是界面一直得不到返回值,排查了一下午,调试的时候是可以有返回的,但是关掉浏览器调试界面,却得不到返回结果. 原因: 一直以为是我后台程序有问题,晚上回到家才想起来ajax的问题,把ajax的异步处理改为同步,就出来效果了,具体的原因请看下文详解. jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到A

    html实例

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec

    如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllD

    微信小程序request请求后台接口php的实例详解 后台php接口:http://www.vueyun.com/good/info 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(['status' => 'success','code' => 200,

    实例如下所示: mui.init(); mui.plusReady(function() { document.getElementById('login').addEventListener('tap',function() { var UserName=document.getElementById("account").value; var Userpassword= hex_md5(document .getElementById("password").v

    本文实例讲述了Ajax返回值类型与用法.分享给大家供大家参考,具体如下: Ajax返回值类型主要有XML类型和文本类型,其中文本类型又可以分为HTML.json类型等. 1.返回值之XML类型 如果服务器的响应头中Content-type的内容为text/xml时,此时XMLHttpRequest对象的responseXML属性才能使用. 2.返回值之文本类型 文本类型主要分为Html类型和json类型. (1)Html类型 使用场景:一般返回需要重复复杂的操作.比如,页面使用ajax从服务器请

    废话不多说,直接上代码 public class DZFP_jdbc extends HttpServlet{ private static final long serialVersionUID = 1L; public static Connection conn; public static ResultSet rs = null ; public static PreparedStatement ps = null ; private static String url = "jdbc:

    展开全文
  • 利用ajax与后端交互

    2019-12-08 11:15:22
    使用jQuery进行ajax的引用,实现交互 ajax代码: $.ajax({ type: "post",//传输数据方式 url: "/getAns",//后端提供接口 dataType: "json",//返回数据类型 contentType: "application/json",//传输数据的类型 ...

    使用jQuery进行ajax的引用,实现交互

    ajax代码:

    $.ajax({
            type: "post",//传输数据方式
            url: "/getAns",//后端提供接口
            dataType: "json",//返回数据类型
            contentType: "application/json",//传输数据的类型
            async: false, //同步请求,默认为true,异步请求
            cache: false,//获取数据途径为不读取缓存,true为读取缓存
            traditional: true,/*默认情况下traditional为false,即jquery会深度序列化参数对象,以适应如PHP和Ruby on Rails框架,但servelt api无法处理,我们可以通过设置traditional 为true阻止深度序列化然后序列化结果如下:
    eg:
        records: ["123", "456", "789"]   
        /* =>    records=123&p=456&p=789
        随即,我们就可以在后台通过request.getParameterValues()来获取参数的值数组
        */
            data: JSON.stringify({
                    choiceAnswers: objToArr(arr),
                    essayAnswers: warr
                }),//向后端传输的数据函数
            success: function(data) {//data为前端获取到的数据,我们可以对其处理
                var textForm = $("#danxuan");
                textForm.html("");
                var str = '<h3>一、选择题</h3><span class="tishi">(本小题每题5分,总分30。)</span>';
                $.each(data['result'], function(index, obj) {
                    str += '<div class="co">'
                    str += '<h4 onselectstart="return false" id="' + obj['choiceQstId'] + '">' + '<strong>' + obj['choiceQstId'] + '</strong>' + ' ' + '.' + ' ' + obj['choiceQstExp'] + '</h4>'
                    str += '<input type="radio" name="optQuestion' + index + '" id="A' + index + '" value="A"><label for="A' + index + '">A.' + obj['a'] + '</label></br>'
                    str += '<input type="radio" name="optQuestion' + index + '" id="B' + index + '" value="B"><label for="B' + index + '">B.' + obj['b'] + '</label></br>'
                    if (obj['c']) { str += '<input type="radio" name="optQuestion' + index + '" id="C' + index + '" value="C"><label for="C' + index + '">C.' + obj['c'] + '</label></br>' }
                    if (obj['d']) { str += '<input type="radio" name="optQuestion' + index + '" id="D' + index + '" value="D"><label for="D' + index + '">D.' + obj['d'] + '</label></br>' }
                    str += '</div>'
                })
                textForm.html(str);
                textForm.append();
            },//后端向前端传输数据成功时执行函数,一般此时状态码为200
            error: function() {
                alert("请求选择题失败");
            },//后端向前端传输数据失败时执行函数
        })
    

    部分HTML代码

    div id="danxuan">
                    </div>
    

    说明:JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。语法如下:
    JSON.stringify(value, replacer, space)
    参数说明:
    value:
    必需, 要转换的 JavaScript 值(通常为对象或数组)。

    		replacer:
    		可选。用于转换结果的函数或数组。
    		
    		如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 				   undefined,则排除成员。根对象的键是一个空字符串:""。
    		
    		如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    		
    		space:
    		可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于  10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。
    		
    		返回值:
    		返回包含 JSON 文本的字符串。
    
    展开全文
  • JS中很多地方会使用Ajax与后台进行数据交互Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染。ajax中前端和后端交互图:...
  • 一、使用原生JavaScript的ajax进行交互   二、使用jQuery封装的ajax进行交互
  • 在开发flask程序的过程,经常会遇到使用ajax与后端进行交互的过程,比如发送一些数据给后端进行验证,并立即返回结果。 可以通过下面的例子来演示flask进行ajax交互的过程,首先编写前端的代码,如下: <!...
  • Yii 2框架使用Ajax与后端交互

    千次阅读 2018-03-26 16:02:47
    近来用了一下Ajax技术做了一下yii框架的后台交互,虽然不是很复杂,但是还是写一下。前端JS代码:function delete(id){ if(confirm("确认删除吗")) $.ajax({ url : "index....
  • 前端使用 Thymeleaf 开发,通过 ajax 与后端交互。后端遵循 RESTful 设计风格。 实验室预约管理系统 需求分析 该系统的用户分为两种:管理员、学生 以下针对两种用户分别描述其功能需求 1、管理员功能需求描述 登录 ...
  • 一、html代码(我自定义了一个搜索框,同时用到了bootstrap框架) 注意引入相应文件,同时table一定要有thead <!DOCTYPE html> <...Datatable利用ajax增删改查</title> <!-- 引...
  • 类型一:请求:key/value ,后端返回:text,方式:Get前端:传输数据类型:key/value ,返回数据类型:text后端:接收方式:形参名绑定key名获取数据,返回方式:@ResponseBody返回字符串@RequestMapping(value = ...
  • 需求:前端通过jQuery Ajax传输json到后端后端接收json,对json进行处理,后端返回一个json给前端这里使用servlet的方式1、采用$.post方法index.jsp页面function checkUserid() {$.post('Ajax/CheckServlet',//url...
  • 本篇文章主要介绍了前端ajax的各种与后端交互的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
  • 一、后端转化为JSON格式传给前端 要引入一系列相关的jar包 List zheJiangGdpList=new ArrayList();zheJiangGdpList=zheJiangGdpService.listAllGdp(); JSONArray jsonArrayGdp = JSONArray.fromObject...
  • @GetMapping("/getMethod2") @ResponseBody public String getMethod2(@RequestParam("username") String username, @RequestParam("password") String password){ if(!(StringUtils.isEmpty(username)&...
  • 通过AJAX与Java后端交互,显示数据库的数据前言前端部分(HTML)Java后端部分(Servlet)最后看显示的效果总结 前言 今天学习了AJAX将Mysql数据库的数据显示到前端页面,以前会通过后端将数据集合传递给前端(jsp),...
  • Ajax 前端/后端数据交互 一 概述 ​ 同步: 一请求一响应,全局刷新 ​ 异步: 多请求多响应,局部刷新 (默认为异步,效率高) ​ 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了Ajax技术 二 Ajax数据交互 ...
  • 前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式--一个是我们通用的web api和控制器,首先我们来仔细...
  • ajax后端循环交互

    2018-07-24 12:58:35
    业务需要:将1000万条数据通过ajax计算后,返回到后端再存入数据库中。 最开始的想法是:将数据全部通过List传到浏览器,然后浏览器再将数据进行遍历计算。 问题:首先是后端jvm内存不够,然后是内存急剧减少后,...
  • json and ajax所需 jar: commons-beanutils-1.7.0.jar commons-collections-3.1.jar ezmorph-1.0.3.jar json-lib-2.1-jdk15.jar struts2-json-plugin-2.2.3.jar //ajax js $.ajax({  type:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,431
精华内容 11,772
关键字:

ajax如何与后端交互