.NET中使用Jquery和Ajax（二）

最新推荐文章于 2023-01-06 10:31:03 发布

Tufffggh

最新推荐文章于 2023-01-06 10:31:03 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

文章标签：技术不行前端看看

本文链接：https://blog.youkuaiyun.com/Tuzkiss1017/article/details/38731691

技术不行同时被 2 个专栏收录

9 篇文章

订阅专栏

前端看看

4 篇文章

订阅专栏

本文介绍了如何在.NET环境中结合jQuery和Ajax技术，创建一个简单的提交表单功能。通过HTML控件如输入框和按钮，当点击提交时，数据以JSON格式发送到服务器的SubmitItem方法。同时，利用加载提示和成功信息反馈增强用户体验。文章以一个实例展示了Ajax的基础应用，并预告将探讨更高级的JPList分页技术。

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

接着上一篇的来讲，现在已经初步学会了在HTML页面中调用这些方法来弹出想要的弹窗。
中间有些关于Ajax的get，post方法在这里就不具体提到了，现在主要讲的是通过Ajax来提交数据，并通过我们之前使用的插件。

首先在页面中插入几个HTML控件，包括输入框和提交按钮，比如：

Title : <input type=text id="Title" value="title" /> <br/>
Image : <input type=text id="Image" value="image" /> <br/>
Description : <input type=text id="Description"  value="descccc"/> <br/>
Likes : <input type=text id="Likes"  value="1"/> <br/>
Keyword1 : <input type=text id="Keyword1"  value= "key1"/> <br/>
Keyword2 : <input type=text id="Keyword2" value= "key2"/> <br/>

<input type="button" value= "submit" id="submit"/>
<input type="button" value= "reset" id="reset"/>

在JS中引用Jquery（1.8版本以上）和layer.js，然后输入我们的操作，首先获取控件中的值，然后点击提交按钮时触发我们的layer确认事件，点击确认触发ajax事件，传递到submit.aspx中的SubmitItem方法，传递的值类型为JSON，其中title为title框输入，依次类推。当成功返回结果只后在用res获取结果中的int类型值（我在方法中返回了一个int类型的值，也可以返回其他类型），如果返回1则为成功，否则失败，在loading1s后转到不同的地址。基本上就是这段JS的主要功能。

< script type = "text/javascript" > $(function() {
    $("#title").focus();
    $('#submit').on('click',
    function() {
        var title = $("#Title").val();
        var image = $("#Image").val();
        var description = $("#Description").val();
        var likes = $("#Likes").val();
        var keyword1 = $("#Keyword1").val();
        var keyword2 = $("#Keyword2").val();

        $.layer({
            shade: [1],
            area: ['top', 'auto'],
            dialog: {
                msg: '是否真的提交！！',
                btns: 2,
                type: 4,
                btn: ['确定', '取消'],
                yes: function() {
                    //ajax
                    $.ajax({
                        type: "POST",
                        url: "submit.aspx/SubmitItem",
                        data: "{ 'title' : '" + title + "', 'image' : '" + image + "', 'description' : '" + description + "', 'likes' : '" + likes + "', 'keyword1' : '" + keyword1 + "', 'keyword2' : '" + keyword2 + "'  }",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(result) {
                            var res = parseInt(result.d);
                            if (res == 1) {
                                layer.load('加载中', 1);
                                setTimeout(function() {
                                    layer.msg('添加成功', 2, 1);
                                },
                                1000);
                                setTimeout(function() {
                                    location.href = "http://blog.youkuaiyun.com/tuzkiss1017";
                                },
                                2000);
                            } else {
                                layer.load('加载中', 1);
                                setTimeout(function() {
                                    layer.msg('添加失败', 2, 8);
                                },
                                1000);
                                setTimeout(function() {
                                    location.href = window.reload;
                                },
                                2000);
                            }
                        },
                        error: function(result) {
                            layer.load('加载中', 1);
                            setTimeout(function() {
                                layer.msg('提交有误，请检查后在提交！', 2, 8);
                            },
                            1000);
                        }
                    })

                },
                no: function() {
                    layer.msg('操作已取消', 1, 3);
                }
            }
        })

    });

}); 
< /script>

当然，要在submit.aspx中定义SubmitItem方法，这个方法为静态方法，且需加[WebMethod],同时引入命名空间 System.Web.Services。

[WebMethod]
public static int SubmitItem(string title, string image, string description, int likes, string keyword1, string keyword2)
{
    Operation operation = new Operation();
    int i = operation.ItemSubmit(title, image, description, likes, keyword1, keyword2);
    return i;
}

我在方法中定义了一个添加到数据库的操作ItemSubmit，返回为操作返回值，在这个返回值返回到前台页面。
记得传入的参数和方法中参数名字要相同。