如何使用html和jquery通过asp.net核心api调用获取数据？

Posted 2023-04-13

【中文标题】如何使用html和jquery通过asp.net核心api调用获取数据？

【英文标题】：How to get data through asp.net core api call using html and jquery?

【发布时间】：2021-11-20 05:23:57

【问题描述】：

我想使用 Asp.netCore Api 和 html 表单在 Mssql 数据库中发布数据。我已经添加了这个脚本来发布数据。但是所有的值都是空的

HTML 文件中的 Jquery 脚本

<script type="text/javascript">
        var valdata = $("#formData").serialize();  
        $(document).ready(function () 
            $("#btnsubmit").click(function (e) 
                let formData = ;
                $("#formData").serializeArray().map((x) =>  formData[x.name] = x.value; );
 $.ajax(
                    url: "https://localhost:44389/Register",
                    contentType: "application/json; charset=utf-8",
                    type: 'POST',
                    dataType: 'json',
                    data: valdata,
                    success: function (data) 
                        alert(data);
                    ,
                    failure: function (data) 
                        alert("Failure: " + data);
                    ,
                    error: function (data) 
                        alert("Error: " + data);
                    
                );
            );
        );
</script>

.net 核心接口

 [HttpPost]
        [Route("Register")]
        public void RegisterExecute([FromBody]CustmRegistration Register)
        
            try
            
                userInterface.InsertCustomer(Register);
               
            
            catch (Exception ex)
            
                throw new Exception(ex.Message);
            
        

【问题讨论】：

嗨@Sharad Kulshrestha，有什么更新吗？我的回答是否帮助您解决了问题？ ——

【参考方案1】：

但是所有的值都是空的

这些值在哪里为空？我的建议是更彻底地开始调试。

您是否通过 postman 或类似的工具尝试过您的 api 功能？ 设置断点可以很好地在运行时查看程序的数据。 如果这些值在您的数据库中为空，那么很高兴看到 userInterface.InsertCustomer(Register); 做了什么。 一旦您知道您的 .net 部分是否正常工作，就开始调试您的 ajaxc 调用。在您使用的浏览器中查看开发者工具的网络部分。

如果您收集了更多数据，人们可以更轻松地帮助您。

【参考方案2】：

1.当您使用.serialize()时，它会生成query string格式的数据，需要使用默认的contentType application/x-www-form-urlencoded; charset=UTF-8发送，而不是JSON。要么删除 contentType 选项，要么指定contentType: application/x-www-form-urlencoded; charset=UTF-8 可以工作。

2.另外你需要将serialize方法移动到onclick事件中。

3.一定要把[FromBody]改成[FromForm]。

这是一个完整的工作演示：

查看：

@model CustmRegistration 
<form id="formData">
       <!--more code-->
       <input type="button" id="btnsubmit"value="create" />                 
</form>

@section Scripts

    <script type="text/javascript">
        $(document).ready(function () 
            $("#btnsubmit").click(function (e) 
                var valdata = $("#formData").serialize();  //move to here...                
                $.ajax(
                    url: "/home/Register",
                    //contentType: "application/json; charset=utf-8",
                    type: 'POST',
                    dataType: 'json',
                    data: valdata,
                    success: function (data) 
                        alert(data);
                    ,
                    failure: function (data) 
                        alert("Failure: " + data);
                    ,
                    error: function (data) 
                        alert("Error: " + data);
                    
                );
            );
        );
    </script>

控制器：

[HttpPost]
[Route("Register")]
public void RegisterExecute([FromForm]CustmRegistration Register)   
 //...