如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)

下面是详细讲解如何在前台脚本通过json传递数据到后台的完整攻略。

1. 基础知识

在使用前台脚本通过json传递数据到后台之前，需要了解以下一些基本知识：

AJAX：Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。它是一种在不刷新整个页面的情况下，通过后台返回的数据来局部刷新页面的技术。
JSON：JavaScript Object Notation，即 JavaScript 对象表示法。它是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
jQuery：一个优秀的 JavaScript 库，包含了大量的工具函数，可以简化 JavaScript 编程。

2. 使用微软自带的 Ajax 发送 Json 数据

在前台脚本中使用 Ajax 发送 Json 数据到后台，需要按照以下步骤进行：

2.1 引入jQuery库文件

在html页面的head标签中引入jQuery库文件：

<head>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

2.2 发送Post请求

使用 $.ajax() 函数发送Post请求，格式如下：

$.ajax({
  url: '后台文件路径',
  type: 'POST',
  data: {}, // JSON数据
  contentType: 'application/json',
  dataType: 'json',
  success: function(result) {
    // 成功回调函数
  },
  error: function(error) {
    // 失败回调函数
  }
});

其中：

url 表示后台的文件路径。
type 表示请求类型，这里是 POST 请求。
data 表示要发送的 JSON 数据。
contentType 表示发送的数据类型，这里是 JSON 格式。
dataType 表示希望从服务器端返回什么类型的数据，这里是 JSON 格式。
success 表示请求成功后的回调函数。
error 表示请求失败后的回调函数。

注意事项：

data 中的信息一定要是 JSON 格式的字符串。
在发送请求的时候需要设置 contentType 指定为 application/json;charset=utf-8。

2.3 接收 Post 请求

在后台文件中接收 Ajax 发送的 Json 数据，需要按照以下步骤进行：

2.3.1 用 Stream 对象接收 Json 数据

using System.IO; // 引入命名空间

[HttpPost]
public ActionResult ReceiveJsonData()
{
  Stream stream = Request.InputStream; // 请求流
  StreamReader streamReader = new StreamReader(stream); // 读取器
  string jsonString = streamReader.ReadToEnd(); // 读取请求数据
  return Json(jsonString);
}

其中：

Request.InputStream 是一个 Stream 对象，表示请求的数据流。
StreamReader 对象读取请求的数据流，得到请求的数据。
Json() 函数将得到的请求数据返回前台。

2.3.2 用 Request 对象接收 Json 数据

[HttpPost]
public ActionResult ReceiveJsonData()
{
  string jsonString = Request["jsonString"]; // 接收JSON数据
  return Json(jsonString);
}

其中：

Request 是一个 HttpContext 对象，表示当前 HTTP 请求的信息和对象。
Request["jsonString"] 表示接收名为 jsonString 的 JSON 数据。

3. 示例演示

3.1 前台发送 Json 数据到后台

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前台发送 Json 数据到后台示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div>
    <button type="button" onclick="sendJsonData()">发送 Json 数据</button>
  </div>
  <script>
    function sendJsonData() {
      let jsonData = {
        "name": "Jack",
        "age": 21,
        "gender": "male"
      };
      $.ajax({
        url: '/Home/ReceiveJsonData',
        type: 'POST',
        data: JSON.stringify(jsonData),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: function(result) {
          alert("请求成功，返回数据：" + result);
        },
        error: function(error) {
          alert("请求失败，错误信息：" + error.status);
        }
      });
    }
  </script>
</body>
</html>

3.2 后台接收前台发送的 Json 数据并返回结果

using System.IO;
using System.Web.Mvc;

public class HomeController : Controller
{
  [HttpPost]
  public ActionResult ReceiveJsonData()
  {
    Stream stream = Request.InputStream;
    StreamReader streamReader = new StreamReader(stream);
    string jsonString = streamReader.ReadToEnd();
    return Json(jsonString);
  }
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在前台脚本通过json传递数据到后台(使用微软自带的ajax) - Python技术站