js访问.net 接口frombody form

一、使用jQuery Ajax访问
(一)、表单传参( [FromForm])
数据类型:Object

ContenyType类型:application/x-www-form-urlencoded

1
var model = { name: "刘大大", age: 23, sex: true };
前台请求


var model = { name: "刘大大", age: 23, sex: true };      
$.ajax({
    url: "http://localhost:9001/API/Default/FormCall",
    type: "POST",
    async: true,
    dataType: "json",
    data: model,
    contentType: "application/x-www-form-urlencoded",
    success: function (data) {
        console.log("data:");
        console.log(data);
    }
});
(二)、JSON字符串[FromBdy]
数据类型:Json

ContenyType类型:application/json

1
       var json = '{"name":"刘大大","age":23,"sex":true}';
也可以使用JSON.stringify(Object)将Object转换为JSON字符串

前端请求

var model = { name: "刘大大", age: 23, sex: true };      
$.ajax({
    url: "http://localhost:9001/API/Default/BodyCall",
    type: "POST",
    async: true,
    dataType: "json",
    data: JSON.stringify(model),
    contentType: "application/json",
    success: function (data) {
        console.log("data:");
        console.log(data);
    }
});
(三)、文件上传
建立FormData对象

数据类型:FromData

ContenyType类型false, //必须false才会避开jQuery对 formdata 的默认处理 processData类型: false, //必须false才会自动加上正确的Content-Type

html

1
<input type="file" multiple id="file" />
JS获取文件对象


var file = document.getElementById("file");
 var files = file.files;
 var formData = new FormData();
 for (var i = 0; i < files.length; i++) {
     formData.append(files[i].name, files[i]);
 }    
formData.append("name", "刘大大");//可追加参数
AJAX请求


$.ajax({
           url: "http://localhost:9001/API/Default/Upload",
           type: "POST",
           async: true,
           dataType: "json",
           data: formData,
           contentType: false,
           processData: false,
           success: function (data) {
               console.log(data);
           }
       });
完整HTML源码


<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div>
    <input type="button" id="fromform" value="Form传参" /><hr />
    <input type="button" id="frombody" value="Body传参" /><hr />
    <input type="file" multiple id="file" name="上传文件" /><hr />
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script>
 
    /**
     * FromForm
     * 
*/
    var fromform = document.getElementById("fromform");
    $(fromform).click(function () {
        var url = 'http://localhost:9001/API/Default/FormCall';
        var model = { name: "刘大大", age: 23, sex: true };
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            data: model,
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                console.log(data);
                alert(JSON.stringify(data));
            },
            error: function (result) {
                console.log(result);
            }
        });
    });
 
    /**
     * FromBody
     * 
*/
    $('#frombody').click(function () {
        var url = 'http://localhost:9001/API/Default/BodyCall';
        var json = '{"name":"刘大大","age":23,"sex":true}';
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            data: json,
            contentType: "application/json",
            success: function (data) {
                console.log(data);
                alert(JSON.stringify(data));
            },
            error: function (result) {
                console.log(result);
            }
        });
    });
 
    /**
     * FormData
     * 
*/
    var file = document.getElementById("file");
    file.onchange = function () {
        var file = document.getElementById("file");
        var files = file.files;
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append(files[i].name, files[i]);
        }
        formData.append("name", "刘大大");
        var isUploadByJs = true;
        var url = isUploadByJs ? 'http://localhost:9001/API/Default/Upload' : 'http://localhost:9002/Home/Upload';
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            dataType: "json",
            data: formData,
            contentType: false//必须false才会避开jQuery对 formdata 的默认处理
            processData: false//必须false才会自动加上正确的Content-Type
            headers: { ReadTime: Date.now() },
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Author', 'liudada');
            },
            success: function (data) {
                console.log(data);
                alert(JSON.stringify(data));
            },
            error: function (result) {
                console.log(result);
            }
        });
    }
</script>  
二、使用C#后台访问
(一)、Get访问

var url = "http://localhost:57954/API/Default/Test";
using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
{
var taskResponse = client.GetAsync(url);
taskResponse.Wait();
if (taskResponse.IsCompletedSuccessfully)
{
var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
taskStream.Wait();
using (var reader = new StreamReader(taskStream.Result))
{
jsonString = reader.ReadToEnd();
}
}
}
(二)、Post访问

var url = "http://localhost:57954/API/Default/BodyCall";           
var data = new {name="刘大大",age=23,sex=true };
using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
{
    var jsonToSend = JsonConvert.SerializeObject(data, Formatting.None, new IsoDateTimeConverter());
    var body = new StringContent(jsonToSend, Encoding.UTF8, "application/json");
    var taskResponse = client.PostAsync(url, body);
    taskResponse.Wait();
    if (taskResponse.IsCompletedSuccessfully)
    {
        var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
        taskStream.Wait();
        using (var reader = new StreamReader(taskStream.Result))
        {
            jsonString = reader.ReadToEnd();
        }
    }
}
  

(三)、上传文件
    

/// <summary>
    /// 上传文件
    /// </summary>
    /// <returns></returns>
    [RequestSizeLimit(1_073_741_824)]
    public IActionResult Upload()
    {
        var url = "http://localhost:9001/Api/Default/Upload";

        var data = new MultipartFormDataContent();
        if (Request.HasFormContentType)
        {
            var request = Request.Form.Files;
            foreach (var item in request)
            {
                data.Add(new StreamContent(item.OpenReadStream()), item.Name, item.FileName);
            }

            foreach (var item in Request.Form)
            {
                data.Add(new StringContent(item.Value), item.Key);
            }
        }
        string jsonString = string.Empty;
        using (var client = new HttpClient(new HttpClientHandler() { AutomaticDecompression = DecompressionMethods.Deflate | DecompressionMethods.GZip }))
        {
            var taskResponse = client.PostAsync(url, data);
            taskResponse.Wait();
            if (taskResponse.IsCompletedSuccessfully)
            {
                var taskStream = taskResponse.Result.Content.ReadAsStreamAsync();
                taskStream.Wait();
                using (var reader = new StreamReader(taskStream.Result))
                {
                    jsonString = reader.ReadToEnd();
                }
            }
        }
        return new JsonResult(jsonString);
    }
  

WebHelper

posted on 2022-05-09 15:29 青蛙學堂 阅读(40) 评论(0)  编辑 收藏 引用 所属分类: c#JavaScript

只有注册用户登录后才能发表评论。
<2022年6月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜

60天内阅读排行