使用jQuery ajax将数据插入数据库而无需在ASP.NET C＃中进行回发

分类：编程问答

如何解决使用jQuery ajax将数据插入数据库而无需在ASP.NET C＃中进行回发

我正在一个需要使用jQuery ajax将数据提交到SQL Server数据库的项目。我习惯于使用回发来提交数据。尝试提交时，提交过程中总是出现错误！在jQuery文件中，而不是成功的消息中，不会插入数据。请问我做错了什么？另外，请在我的aspx页面，jQuery脚本，asmx中的类和web方法下面找到：

我的ASPX页面：

<div id="sf6" class="frm" style="display: none;">
    <fieldset>
        <legend>Bank Account Information [Step 6 of 7]</legend>


        <div class="form-group">
            <%--<label class="col-lg-2 control-label" for="uname">Subject 1: </label>--%>
            <div class="col-lg-10">
                <div style="color: #b94a48; font-weight: bold; font-size: 14px; background-color: #f2dede; border: #eed3d7 1px solid; padding: 10px; margin-top: 5px; margin-bottom: 5px;">
                    <p>
                        <b>Important Info:</b>PLEASE SUPPLY YOUR PERSONAL ACTIVE ACCOUNT DETAILS.
                    </p>
                </div>
            </div>

        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <label class="col-lg-2 control-label" for="uname">Bank: </label>
            <div class="col-lg-6">
                <asp:DropDownList ID="ddlbankname" runat="server" Height="30px" Width="330px">
                    <asp:ListItem>--Select Bank--</asp:ListItem>
                    <asp:ListItem>Access Bank Plc</asp:ListItem>
                    <asp:ListItem>Access (Diamond)Bank Plc</asp:ListItem>
                    <asp:ListItem>CitiBank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>Ecobank Nigeria Plc</asp:ListItem>
                    <asp:ListItem>Enterprise Bank Plc</asp:ListItem>
                    <asp:ListItem>Fidelity Bank Plc</asp:ListItem>
                    <asp:ListItem>First Bank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>First City Monument Bank Plc</asp:ListItem>
                    <asp:ListItem>Globus Bank Limited</asp:ListItem>
                    <asp:ListItem>Guaranty Trust Bank Plc</asp:ListItem>
                    <asp:ListItem>Heritage Banking Company Limited</asp:ListItem>
                    <asp:ListItem>Jaiz Bank Plc</asp:ListItem>
                    <asp:ListItem>Keystone Bank</asp:ListItem>
                    <asp:ListItem>MainStreet Bank</asp:ListItem>
                    <asp:ListItem>Polaris Bank</asp:ListItem>
                    <asp:ListItem>Providus Bank</asp:ListItem>
                    <asp:ListItem>Skye Bank Plc</asp:ListItem>
                    <asp:ListItem>Stanbic IBTC Ltd</asp:ListItem>
                    <asp:ListItem>Standard Chartered Bank Nig Ltd</asp:ListItem>
                    <asp:ListItem>Sterling Bank Plc</asp:ListItem>
                    <asp:ListItem>SunTrust Bank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>Titan Trust Bank Limited</asp:ListItem>
                    <asp:ListItem>Union Bank of Nigeria Plc</asp:ListItem>
                    <asp:ListItem>United Bank For Africa Plc</asp:ListItem>
                    <asp:ListItem>Unity Bank Plc</asp:ListItem>
                    <asp:ListItem>Wema Bank Plc</asp:ListItem>
                    <asp:ListItem>Zenith Bank Plc</asp:ListItem>
                </asp:DropDownList>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <label class="col-lg-2 control-label" for="uname">Account No: </label>
            <div class="col-lg-6">
                <asp:TextBox runat="server" type="text" class="form-control" ID="txtaccno" Width="330px" placeholder="*Account Number" value="" MaxLength="10"></asp:TextBox>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="form-group">
            <label class="col-lg-2 control-label" for="txtsortcode">Sort Code: </label>
            <div class="col-lg-6">
                <asp:TextBox runat="server" type="text" class="form-control" ID="txtsortcode" Width="330px" placeholder="Sort Code(Optional)" value=""></asp:TextBox>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <div class="col-lg-6">
                <asp:Button ID="btnbankinfo" class="btn-success" runat="server" Text="SAVE" Height="44px" Width="80px" Style="font-weight: bolder" />
                <span class="fa fa-arrow-right"></span>
                <%--<asp:Label ID="lblbankinfo" runat="server" Text="Label"></asp:Label>--%>
                <span id="bnkmsg"></span>

                <div style="color: #b94a48; font-weight: bold; font-size: 14px; background-color: #f2dede; border: #eed3d7 1px solid; padding: 10px; margin-top: 5px; margin-bottom: 5px;">
                    <p>
                        <b>Important Info:</b>Please ensure you SAVE each PAGE before clicking on the NEXT Button!
                    </p>
                </div>

            </div>
        </div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <div class="col-lg-10">
                <button class="btn btn-warning back6" type="button"><span class="fa fa-arrow-left"></span>Back</button>
                <button class="btn btn-primary open6" type="button" style="font-weight: bolder">Next <span class="fa fa-arrow-right"></span></button>
            </div>
        </div>


    </fieldset>
</div>

我的JAVASCRIPT文件：

$(document).ready(function () {
        $("#btnbankinfo").on('click',function (e) {
            e.preventDefault();
            var BankDetails = {};

            BankDetails.Bank = $("#ddlbankname").val();
            BankDetails.AccountNo = $("#txtaccno").val();
            BankDetails.SortCode = $("#txtsortcode").val();
            BankDetails.UserId = $("txtuserid").val();
            BankDetails.Email = $("#txtemail").val();

            var jsonData = JSON.stringify({
                BankDetails: BankDetails
            });

            $.ajax({
                type: "POST",url: "CustomWebService.asmx/addBank",data: jsonData,contentType: "application/json; charset=utf-8",dataType: "json",success: OnSuccess,error: OnErrorCall
            });

            function OnSuccess(response) {
                var result = response.d;
                if (result == "success") {
                    $("#bnkmsg").html("Personal details addded successfully  :)").css("color","green");
                }
                $("#ddlbankname").val("");
                $("#txtaccno").val("");
                $("#txtsortcode").val("");
                $("#txtuserid").val("");
                $("#txtemail").val("");

            }

            function OnErrorCall(response) {
                $("#bnkmsg").html("An Error has occurred. Please Try Again!").css("color","red");
            }

        });

});

我的班级文件：

public class BankDetails
{
    public int BankID { get; set; }
    public string Bank { get; set; }
    public string AccountNo { get; set; }
    public string SortCode { get; set; }
    public Guid UserId { get; set; }
    public string Email { get; set; }    
}

我的WEBFETHOD：

[WebMethod]
public string addBank(BankDetails BankDetails)
{
    try
    {
        string CS = ConfigurationManager.ConnectionStrings["NNPC-ChevronScholarshipConnectionString"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(CS))  
        //using (SqlConnection conn = new SqlConnection(this.conn.ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "spAddBankDetails";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = conn;

                cmd.Parameters.AddWithValue("@Bank",BankDetails.Bank);
                cmd.Parameters.AddWithValue("@AccountNo",BankDetails.AccountNo);
                cmd.Parameters.AddWithValue("@SortCode",BankDetails.SortCode);
                cmd.Parameters.AddWithValue("@UserId",BankDetails.UserId);
                cmd.Parameters.AddWithValue("@Email",BankDetails.Email);
                conn.Open();
                cmd.ExecuteNonQuery();
            } conn.Close();
        }
        return "success";
    }
    catch (Exception ac)
    {
        return "Error";
    }
}

解决方法

由于您没有将错误与源代码一起发布，因此我只能分析并查看其中的一个问题，该问题将导致您面临潜在的错误，即正在发送的json。请注意，您正在构建json数据，如下所示：

var BankDetails = {};

BankDetails.Bank = $("#ddlbankname").val();
BankDetails.AccountNo = $("#txtaccno").val();
BankDetails.SortCode = $("#txtsortcode").val();
BankDetails.UserId = $("txtuserid").val();
BankDetails.Email = $("#txtemail").val();

var jsonData = JSON.stringify({
    BankDetails: BankDetails
});

可能生成以下json作为请求正文：

{
    "BankDetails" : 
    {
        "Bank": "Some Bank","AccountNo": "Some Account #","SortCode": "Sort Code","UserId": "1234","Email": "abc@gmail.com"
    }
}

从技术上讲，这不会映射到您拥有的类结构上。

要解决此问题，您可以有两种解决方案，最简单直接的方法是直接stringify对象json，而不是将对象添加到另一个json主体中下方：

var BankDetails = {};

BankDetails.Bank = $("#ddlbankname").val();
BankDetails.AccountNo = $("#txtaccno").val();
BankDetails.SortCode = $("#txtsortcode").val();
BankDetails.UserId = $("txtuserid").val();
BankDetails.Email = $("#txtemail").val();

// This line
var jsonData = JSON.stringify(BankDetails);

第二种方法是自定义您的类结构并引入一个父类，该类将在其中保存对象BankDetails，如下所示：

public class BankDetails
{
    public int BankID { get; set; }
    public string Bank { get; set; }
    public string AccountNo { get; set; }
    public string SortCode { get; set; }
    public Guid UserId { get; set; }
    public string Email { get; set; }    
}
public class BankDetailsParent
{
    public BankDetails BankDetails { get; set;}
}

类似地，这将修改您拥有的WebMethod的参数：

[WebMethod]
public string addBank(BankDetailsParent BankDetailsParent)
{
    BankDetails BankDetails = BankDetailsParent.BankDetails; // get the bank details object.
    //  your logic here
    string doStuff = "doStuff";
    return doStuff;
}

更新 

$(document).ready(function () {
        $("#btnbankinfo").on('click',function (e) {
            e.preventDefault();
            var BankDetails = {};

            BankDetails.Bank = $("#ddlbankname").val();
            BankDetails.AccountNo = $("#txtaccno").val();
            BankDetails.SortCode = $("#txtsortcode").val();
            BankDetails.UserId = $("txtuserid").val();
            BankDetails.Email = $("#txtemail").val();

            var jsonData = JSON.stringify(BankDetails);

            $.ajax({
                type: "POST",url: "CustomWebService.asmx/addBank",data: jsonData,contentType: "application/json; charset=utf-8",dataType: "json",success: OnSuccess,error: OnErrorCall
            });

            function OnSuccess(response) {
                var result = response.d;
                if (result == "success") {
                    $("#bnkmsg").html("Personal details addded successfully  :)").css("color","green");
                }
                $("#ddlbankname").val("");
                $("#txtaccno").val("");
                $("#txtsortcode").val("");
                $("#txtuserid").val("");
                $("#txtemail").val("");

            }

            function OnErrorCall(response) {
                $("#bnkmsg").html("An Error has occurred. Please Try Again!").css("color","red");
                console.log(response); // this will contain the error you are facing.
            }
            /* Add this line here: */
            return false; // this will return false and the postback won't occur.

        });

});

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
VM VirtualBox中安装centos时报错：设置基础软件仓库时出错
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
kafka常见问题
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
hive常见问题
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
装载数据时报错：Failed to execute spark task, with exception 'org.apache.hadoop.hive.ql.metadata.HiveException(Failed to create spark client.)'
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
flume常见问题
报错1：执行到如下就不执行了，没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
hadoop集群常见错误
虚拟及没有启动任何服务器查看jps会显示jps，如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
hive常见错误
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
Linux常见错误
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
使用sqoop一直卡在：mapreduce.Job: Running job: job_1703173956074_0001
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot