ajax 前台 后台,Javascript 中ajax实现前台向后台交互

第一种情况:前台传入字符串参数 后台返回json字符串、或是json数组

代码如下:

前台:

$.ajax({

url: "xxx/xxx.action",

data: "id=xxx",

cache: false,

async: false,

success: function(result)

{

A:接收后台返回的数组

var data = eval(result);

if (typeof(data) != "undefined" && data.length > 0)

{

for(var i=0;i

{

data[i]["id"];

data[i]["name"];

}

}

B: 后台返回字符串、则直接接收

},

error: function(){

alert("table loading error...");

}

});

后台:

PrintWriter out = ServletActionContext.getResponse().getWriter();

/* 后台返回json字符串*/

StringBuffer string = new StringBuffer();

string.append(""); out.print(string);

/* * 后台返回json数组 */

List list = new ArrayList();

JSONArray jArray = JSONArray.fromObject(list);

out.print(jArray); out.flush();

return null;

第二种情况:前台传入json数组作为参数与后台进行交互

前台:

function delCheckedData(){

var array = new Array();

$(":checkbox[name='chk'][checked=true]").each(function(){

array.push({

id: $(this).val()

});

})

if (array.length > 0) {

var gridJSON = JSON.stringify(array, function(key, value){

return value;

});

$.ajax({

url: "/xxx/xxx.action",

cache: false,

data: "idListJSON=" + gridJSON,

async: false,

success: function(result){

var instData = eval(result);

//相应的处理

},

error: function(){

alert("Error...");

}

});

}

}

后台:

JSONArray instArray = JSONArray.fromObject("参数");

for (int i = 0; i < instArray.size(); i++)

{

JSONObject instJ = (JSONObject)instArray.get(i);

String sId = instJ.get("id").toString();

//得到Id做相应的操作

}

javascript 中XMLHttpRequest 实现前台向后台的交互

使用XMLHttpRequest对象分为4部完成: 1.创建XMLHttpRequest组建 2.设置回调函数 3.初始化XMLHttpRequest组建 4.发送请求

JavaScript中Ajax的用法

XMLHttpRequest 对象的属性和方法: open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求 send(string)   将请求发送到服务器. res ...

JavaScript中Ajax的使用

AJAX全称为“Asynchronous javascript and XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交换,AJ ...

javascript中ajax的四大步骤

原生js中ajax写法一: function ajaxys(){ //1. 创建xhr对象 var xhr = new XMLHttpRequest();//XMLHttpRequest() // 2 ...

封装AJax实现JSON前台与后台交互

实践技术点:1.AJax自定义封装 2.后台序列化与反序列化JSON 3.客户端解析JSON字符串,处理DOM 实现代码如下: 1.JS脚本代码:   1 /*** NOTE:AJAX处理JS TIM ...

JavaScript中Ajax

Ajax技术,就是指:向服务器请求额外的数据而无须重新加载整个页面.其核心就是 XMLHttpRequest对象.(简称:XHR) 在这里,我们先讨论IE7及更高版本,以及FF,Opera,Chrom ...

JavaScript中Ajax的get和post请求

AJAX = 异步 JavaScript和XML(Asynchronous JavaScript and XML) 作用:在不重新加载整个网页的情况下,对网页的某部分进行更新.   两种请求方式: 1 ...

javascript中ajax post实例详解

一,原生态的XMLHttpRequest 代码如下 复制代码

javaScript中ajax、axios总结

一.原生js实现ajax请求: 步骤: get请求: // 1.创建一个XMLHttpRequest的对象. var xml=null; //初始值设为空 if(XMLHttpRequest){ xm ...

随机推荐

oracle存储过程常用技巧

我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...

Yii rules常用规则(转)

public function rules() { return array( //必须填写 array('email, username, password,agree,verifyPassword ...

python Request库

命令行查看版本:python --version pip --version pip常用命令// 安装包pip install xxx// 升级包pip install -U xxx// 卸载包pip ...

Spark源码系列(二)RDD详解

1.什么是RDD? 上一章讲了Spark提交作业的过程,这一章我们要讲RDD.简单的讲,RDD就是Spark的input,知道input是啥吧,就是输入的数据. RDD的全名是Resilient Di ...

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...

MongoDB - Introduction to MongoDB

MongoDB is an open-source document database that provides high performance, high availability, and a ...

Centos 7安装gvim

sudo yum install vim-X11 download vimrc from github

asp&period;net下用js实现弹出子窗口选定值并返回

对应上一篇博客代码: 父页面:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在前端页面上需要先显示需要修改的数据。可以使用 layui 的表单组件,例如 lay-form 或 lay-filter。在表单需要设置好相应的 input、select 等表单元素,并且设置好它们的 name 属性,方便后端接收数据。 接着,通过 ajax 调用后端接口来获取需要修改的数据。在 ajax 的 success 回调函数,将获取到的数据填充到表单,用于数据回显。 例如: ```javascript $.ajax({ url: 'backend/api/getDataById', data: {id: id}, // id 是需要修改的数据的唯一标识 success: function(result) { // 将获取到的数据填充到表单,用于数据回显 $('input[name="name"]').val(result.name); $('select[name="gender"]').val(result.gender); $('input[name="age"]').val(result.age); // ... } }); ``` 最后,在表单设置好修改按钮的事件处理函数,通过 ajax 调用后端接口来提交修改后的数据。 例如: ```javascript $('button[name="submit"]').on('click', function() { // 获取表单数据 var name = $('input[name="name"]').val(); var gender = $('select[name="gender"]').val(); var age = $('input[name="age"]').val(); // ... $.ajax({ url: 'backend/api/updateData', type: 'POST', data: {id: id, name: name, gender: gender, age: age, ...}, // 将修改后的数据提交给后端 success: function(result) { // 处理修改成功后的逻辑 }, error: function() { // 处理修改失败后的逻辑 } }); }); ``` 这里的 id 是需要修改的数据的唯一标识,需要在获取数据时获得,并传递给后端

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值