.NET Simple Form通过AJAX和JQUERY提交

由于balexandre和rtiq，我得到了流量。 我的.ashx文件被调用，所以我知道一部分代码正在运行，它提醒我一个错误。 当我跟踪.NET时，通过context.Request [“email”]和context.Request [“optin”]引入的变量为NULL。

我知道有些不对劲但我看不到它。 我已经重新编辑了这篇文章，以获得最新的代码。

HEAD中的jQuery

 $(document).ready(function () { $(".submitConnectButton").click(function (evt) { evt.preventDefault(); alert("hello click"); alert($(".emailConnectTextBox").val()); $.ajax({ type: "POST", url: "/asynchronous/insertEmail.ashx", data: "{email: '" + $(".emailConnectTextBox").val() + "',optin: '" + $(".connectCheckbox").val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert(msg.d); }, error: function (msg) { alert('Error:' + msg); } }); }); });  

HTML

.ashx中的CodeBehind

 public class insertEmail : IHttpHandler { public void ProcessRequest(HttpContext context) { string strConnection = System.Configuration.ConfigurationManager.AppSettings["SQLConnectString"].ToString(); string email = context.Request["email"], optin = context.Request["optin"]; string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "','" + optin.ToString() + "')"; SqlConnection Conn = new SqlConnection(strConnection); SqlCommand Command = new SqlCommand(strSQL, Conn); Conn.Open(); Command.ExecuteNonQuery(); Conn.Close(); context.Response.ContentType = "text/plain"; context.Response.Write("email inserted"); } public bool IsReusable { get { return false; } } } 

表格和元素表现得很好。 我们只是获取此NULL值而无法插入。 ajax正在调用.ashx文件并且文件正在编译，请求的变量为空。之前的帮助很棒，如果有人能帮我解决这个问题，你会得到一个金星！ 🙂

---

经过一些书籍离线搜索后，这最终与balexandres .aspx方法结合使用：

解

 $.post("/asynchronous/addEmail.aspx", {email: $(".emailConnectTextBox").val(),optin: $(".connectCheckbox").is(':checked')}, function(data) { alert('Successful Submission');}); 

Answer 1

• 在您的网站根目录中创建一个名为asynchronous的新文件夹
• 创建一个名为addEmail.aspx的新aspx页面并删除除第1行以外的所有HTML
• 在addEmail.aspx里面放置你的代码，比如：

。

 public void Page_Load(...) { insertEmail(); } public void inserEmail() { string email = Request["email"], optin = Request["optin"]; string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "', optin)"; SqlConnection Conn = new SqlConnection(strConnection); SqlCommand Command = new SqlCommand(strSQL, Conn); Conn.Open(); Command.ExecuteNonQuery(); Conn.Close(); // Output Response.Write("email inserted"); } 

• 在您的主页面中，具有.ajax()调用将url属性更改为

  url: "/asynchronous/insertEmail.aspx",

您将在msg中success: function (msg) {} email inserted的字符串email inserted

这是我经常做的，但是，我使用的ASHX（Generic Handler）页面不包含任何ASP.NET页面循环（加载速度更快）而不是创建ASPX页面，而且它是一个简单的页面。

---

如果你想使用Generic Handler ，在asynchronous文件夹里面创建一个名为inserEmail.ashx的文件，完整的代码将是：

 public class insertEmail : IHttpHandler { public void ProcessRequest(HttpContext context) { string email = context.Request["email"], optin = context.Request["optin"]; string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "', optin)"; SqlConnection Conn = new SqlConnection(strConnection); SqlCommand Command = new SqlCommand(strSQL, Conn); Conn.Open(); Command.ExecuteNonQuery(); Conn.Close(); context.Response.ContentType = "text/plain"; context.Response.Write("email inserted"); } public bool IsReusable { get { return false; } } } 

并且，记得将您的url属性更改为url: "/asynchronous/insertEmail.ashx",

---

从您的评论中我意识到您的data属性也不正确。

正确的是：

 data: { "email" : $(".emailConnectTextBox").val(), "optin" : $(".connectCheckbox").val() }, 

你的完整ajax调用应该是：

 $.ajax({ type: "POST", url: "/asynchronous/insertEmail.ashx", data: { "email" : $(".emailConnectTextBox").val(), "optin" : $(".connectCheckbox").val() }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { alert(msg.d); }, error: function (msg) { alert('Error:' + msg.d); } }); 

并且通用处理程序中的Response.Write应传递JSON字符串

所以，改变tgis context.Response.Write("email inserted"); into context.Response.Write("{d:'email inserted'});

就这样。

Answer 2

  $("button").click(function(){ var content = new Object(); content.email = $("#email").val(); content.option = $("#checkbox").val(); content = JSON.stringify(content); $.ajax({ async: false, type: "POST", url: aspxPage + "/" + function, //make sure root is set proper. contentType: "application/json;", data: content, dataType: "json", success: successFunction, error: errorFunction }); }); //Make sure the form is posted ..which is needed for ajax to submit. //the data part in code behind seems ok. 

Answer 3

您的html代码中没有表单，因为您可能不使用提交。 使用click代替rciq写道。

Answer 4

尝试改变这个：

 $("#connectButton").submit(function () { alert("hello click"); (...) 

对此：

 $("#connectButton").click(function (evt) { evt.preventDefault(); alert("hello click"); (...) 

此外，您必须记住ASP.NET服务器控件的ID与呈现的DOM控件ID不同。 这可能是您的警报无法触发的原因。 如果您在与服务器控件相同的页面上编写客户端脚本，则可以通过以下方式在脚本标记内“呈现”ClientID：

 $("<%= connectButton.ClientID %>").click( ... 

另一件事。 如果在HEAD脚本中使用jQuery选择，则可能会过早地找到控件。 您应该在创建DOM控件后运行它们。 要完成的一件事是使用’ready’事件：

http://api.jquery.com/ready/