Posting array of JSON objects to MVC3 action method via jQuery ajax

本文介绍如何使用jQuery的AJAX功能将表单数据序列化为JSON对象,并将其发送到MVC3控制器进行处理。通过自定义的jQuery插件实现表单数据的收集与转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

标题知道含义但是不知如何精确翻译。献丑翻译:JQuery ajax将JSON对象传递给MVC3控制器。

但是实际功能:

将表单里面所有的标签的值转换为object,将此object传递给MVC3控制器。当然了,这里不单单指这种使用方法,估计这是最常用。一句话:jQuery可将object传递给MVC3控制器作为参数。

MVC Control:

[HttpPost]
public ActionResult Create(NetworkGrain.Models.Action model)
{
}

javascript:

下载插件或者使用下面的代码

jQuery.serializeObject.js 网上下载或者代码如下:

jQuery.fn.serializeObject = function () {
        var arrayData, objectData;
        arrayData = this.serializeArray();
        objectData = {};
        $.each(arrayData, function () {
            var value;
            if (this.value != null) {
                value = this.value;
            } else {
                value = '';
            }
            if (objectData[this.name] != null) {
                if (!objectData[this.name].push) {
                    objectData[this.name] = [objectData[this.name]];
                }
                objectData[this.name].push(value);
            } else {
                objectData[this.name] = value;
            }
        });
        return objectData;
    };

注意,这可能有新版。

调用的代码

var param = $("#form").serializeObject();
 $.ajax({
 url:"/Action/Create",
 global:false,
 cache:false,
 type:"POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(param),
success:function(){
  }
});

大家试试,很好!
### 如何在 Vue3 中集成 Element Plus 并处理 JSON 文件 #### 安装依赖库 为了能够在 Vue3 项目中使用 Element UI,需安装 `element-plus` 库。由于 Vue3 的发布,Element UI 社区推出了针对 Vue3 的版本——Element Plus。 ```bash npm install element-plus --save ``` #### 配置 main.js 或 main.ts 文件 对于 Vue3 项目的入口文件配置如下: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; // 导入整个 ElementPlus 组件库及其样式表 import ElementPlus from &#39;element-plus&#39;; import &#39;element-plus/dist/index.css&#39;; const app = createApp(App); app.use(ElementPlus); app.mount(&#39;#app&#39;); ``` 上述代码展示了如何将 Element Plus 注册为全局插件并应用其默认主题样式[^1]。 #### 创建 API 调用方法 定义用于发起 HTTP 请求的方法来获取或提交 JSON 数据。这里假设采用 axios 进行网络请求操作: ```javascript // src/api/request.js import axios from &#39;axios&#39;; export function fetchJsonData(url, params) { return axios.get(url, {params}).then(response => response.data).catch(error => console.error(&#39;Error fetching data:&#39;, error)); } export function postJsonData(url, payload) { return axios.post(url, payload).then(response => response.data).catch(error => console.error(&#39;Error posting data:&#39;, error)); } ``` 此部分实现了两个函数:一个是 GET 方法读取远程服务器上的 JSON 数据;另一个是 POST 方法向指定 URL 发送数据对象作为请求体[^2]。 #### 使用组件展示和编辑 JSON 数据 接下来可以在页面上创建一个简单的界面让用户查看以及修改这些 JSON 结构化的内容。例如,在某个视图组件内实现双向绑定输入框与显示区域的功能。 ```html <template> <div class="json-editor"> <!-- 显示接收到的数据 --> <pre>{{ jsonData }}</pre> <!-- 提供用户手动更改 json 字符串的地方 --> <el-input v-model="inputValue" type="textarea"></el-input> <br/> <!-- 按钮触发保存动作 --> <el-button @click="updateJson">更新</el-button> <!-- 错误提示信息 --> <p style="color:red">{{ errorMessage }}</p> </div> </template> <script lang="ts"> import { defineComponent, ref, onMounted } from &#39;vue&#39;; import { fetchJsonData, postJsonData } from &#39;../api/request&#39;; export default defineComponent({ name: &#39;JsonEditor&#39;, setup() { const inputValue = ref(&#39;&#39;); let jsonData = ref({}); let errorMessage = ref(&#39;&#39;); async function loadInitialData(){ try{ const result = await fetchJsonData(&#39;/path/to/json&#39;); // 替换成实际API路径 jsonData.value = result; inputValue.value = JSON.stringify(result,null,&#39; &#39;); } catch(e){ errorMessage.value=&#39;加载初始数据失败&#39; } } async function updateJson(){ try{ const parsedInput=JSON.parse(inputValue.value); await postJsonData(&#39;/path/to/update&#39;,parsedInput); // 同样替换为目标URL jsonData.value=parsedInput; errorMessage.value=&#39;&#39;; } catch(parseErr){ errorMessage.value=`解析输入的JSON字符串时发生错误:${parseErr.message}`; } } onMounted(() => { loadInitialData(); }); return { inputData, jsonData, errorMessage, updateJson }; }, }); </script> ``` 这段模板描述了一个可以预览、编辑并通过按钮上传修改后的 JSON 文档的小工具。它利用了 Element Plus 的 `<el-input>` 和 `<el-button>` 来构建交互式的前端控件,并且通过 TypeScript 编写的组合式 API (`setup`) 实现逻辑控制[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值