使用ajax传递及接收数据

前端代码:

 1     <input id="txtNum1" name="txtNum1" type="text" width="130" />
 2     <select id="fh" name="fh">
 3         <option id="jia" value="+">+</option>
 4         <option id="jian" value="-">-</option>
 5         <option id="chen" value="*">*</option>
 6         <option id="chu" value="/">/</option>
 7     </select>
 8     <input id="txtNum2" name="txtNum2" type="text" width="130" />
 9     <input id="btnSubmit" type="button" value="=" />
10     <input id="txtResult" type="text" width="130" />
11
12 @section scripts{
13     <script>
14         $(function () {
15             $("#btnSubmit").bind("click", function () {
16                 debugger
17                 $.ajax({
18                     @*url: ‘@Url.Action("JS")‘,*@
19                     url: "/Home/JS",
20                     data: {
21                         "num1": $("#txtNum1").val(),
22                         "num2" : $("#txtNum2").val(),
23                         "fh":$("#fh").val()
24                     },
25                     dataType: "json",
26                     type: "post",
27                     success: function (data){
28                         $("#txtResult").val(data.Result);
29                     },
30                     error: function (e, a){
31                         alert(a);
32                     }
33                 })
34             })
35         })
36     </script>
37 }

后台action代码:

 1 [HttpPost]
 2         public JsonResult JS(string num1, string num2,string fh)
 3         {
 4             int result = 0;
 5             try
 6             {
 7                 switch (fh)
 8                 {
 9                     case "+":
10                         result = Convert.ToInt32(num1) + Convert.ToInt32(num2); break;
11                     case "-":
12                         result = Convert.ToInt32(num1) - Convert.ToInt32(num2); break;
13                     case "*":
14                         result = Convert.ToInt32(num1) * Convert.ToInt32(num2); break;
15                     case "/":
16                         result = Convert.ToInt32(num1) / Convert.ToInt32(num2); break;
17                     default:
18                         break;
19                 }
20             }
21             catch (Exception ex)
22             {
23                 log.Error("Error", new Exception(ex.Message));
24                 return Json("");
25             }
26             var data = new { Result = result };
27             return Json(data);
28         }

时间: 2024-11-07 04:49:10

使用ajax传递及接收数据的相关文章

jq ajax传递json对象到服务端及contentType的用法

目录 0.一般情况下,通过键值对的方式将参数传递到服务端 1.ajax 传递复杂json对象到服务端 2.content-Type 对asp.net mvc项目的重要性 0.一般情况下,通过键值对的方式将参数传递到服务端 0.1 客户端代码: $.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data

ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导

随笔:ajax传递数组,layui父子页面传值,下来菜单赋值,父页面数据获取,表格数据替换为字符串

一.Ajax向后台传递数组问题:(声明前台我使用的layui框架)例:我们要多前台一个数据表格进行批量删除操作,我们通过复选框选中数据id,将id存入一个数组中,然后利用ajax传递给后台,完成批量删除,再过程中我们需要加上traditional : true代码如下: function batchDel() { var datas; var ids = new Array();// 声明数组 layui.use('table', function() { var table = layui.t

Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据)

form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 这里必须要请求头格式才能把上传文件的对象传过去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user">

SpringMVC之ajax传递jason数据详解以及@RequestBody和@ResonseBody注解

最近在做ajax进行用户名校验时遇到了一些问题,在不断debug的过程中也加深了我对springMVC之ajax传递jason数据的理解,希望对有需要的小伙伴一些帮助~ 工具:IDEA 我们通过code来理解一下: 1.如下图时js代码:因为是对用户名校验,所以传入的数据只有用户名: PS:SpringMVC 通过ajax传参到后台时:因为@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象.然而在ajax请求往往传的都是Json对象,用 JSON.stringify

spring mvc+ajax 实现json格式数据传递

使用ajax传递JSON对象 下面示例为ajax发送json对象,返回json格式数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $.ajax({ url: "api/user", type: "POST", timeout: txnTimeOut, async: true, dataType: "json", data: {username : "lucy"}

前端Ajax传递Json数据,后端处理两种方式

在这里只讨论在前端通过Ajax远程传输Json数据的,不讨论通过form的形式传递数据 第一种方式: 前端传递过来的数据刚好和我们的bean实体对象属性一致,则可以使用对象的形式接受. 前端写法: 1 $().ready(function(){ 2 var obj = JSON.stringify({'userNo':'121589','processId':'15','processName':'测试审批','description':'这是一个测试'}); 3 alert(obj); 4 5

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝试,中途也遇到了不少问题.今天就来讨论一下其中之一的问题,WebAPI与前端Ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致Cookies数据无法获取. 最开始通过头部(Header)将Cookies传输到其WebAPI,也能解决问题. 下面讲述另外一种解决方案. 解决过

spring mvc接收ajax提交的JSON数据,并反序列化为对象

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo