使用ajax向表格和页面添加条目
Posted
技术标签:
【中文标题】使用ajax向表格和页面添加条目【英文标题】：Adding an entry to the table and page using ajax 【发布时间】：2019-05-23 00:04:16 【问题描述】：我学习 javascript。得到ajax请求。在 mvc 中一切正常。我决定尝试使用网络表单。试图在页面上发布新条目，请告诉我我做错了什么。这是我的代码。页面代码作为主视图：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tables.aspx.cs" Inherits="WebApplication1.Tables" %>
<!DOCTYPE html>
<script src="../../Scripts/jquery-1.8.0.min.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<table id="tab" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Author</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1408</td>
<td>Stiven King</td>
<td>500</td>
</tr>
</tbody>
</table>
</div>
<form id="form1" runat="server">
<asp:TextBox ID="txbName" runat="server"></asp:TextBox>
<asp:TextBox ID="txbAuthor" runat="server"></asp:TextBox>
<asp:TextBox ID="txbPrice" runat="server"></asp:TextBox>
<input id="btnAdd" type="submit" value="Добавить" />
</form>
</body>
</html>
<script>
$('#btnAdd').on('click', function ()
$.ajax(
type: "POST",
url: "Tables.aspx/AddBook",
data: JSON.stringify(
"Name": $('#txbName').val(),
"Author": $('#txbAuthor').val(),
"Price": $('#txbPrice').val()
),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (MyDT)
$('#tab tbody').append(MyDT);
,
error: function (xhr)
alert(xhr.statusCode)
);
);
</script>
Web方法代码，控制器：
[WebMethod]
public static string AddBook(string Name, string Author, int Price)
db = new Context();
string html = "";
Book book = new Book() Name = Name, Author = Author, Price = Price ;
db.Books.Add(book);
db.SaveChanges();
html = GetHTMLRow(book);
return html;
还有另一种获取 html 代码以进一步向页面添加条目的方法，类似于条目将在其上的局部视图：
public static string GetHTMLRow(Book book)
string htmlRow = $"<tr><td>book.Name</td><td>book.Author</td><td>book.Price</td></tr>";
return htmlRow;
我的代码完全可以运行，但由于某种原因页面重新启动。但是ajax请求不应该在不接触页面的情况下异步工作吗？在 MVC 中一切正常。那为什么不呢？有什么问题？
【问题讨论】：
【参考方案1】：当您单击按钮时，它会提交表单（因为类型设置为“提交”）。改成“按钮”
<input id="btnAdd" type="button" value="Добавить" />
【讨论】：
潘杜朗，谢谢。表单不再重新加载，但由于某种原因，向页面添加一行不起作用。success: function (MyDT) $('#tab tbody').append(MyDT);，但是如果我自己在客户端上执行此代码，则会添加一行，为什么会这样？
做一个console.log(MyDT) 看看你是否得到了预期的结果。我在您的$html_row 字符串中看到$ 登录。所以删除它并尝试string htmlRow = "<tr><td>book.Name</td><td>book.Author</td><td>book.Price</td></tr>";可能是这个原因。
Pandurang, MyDT contatin d: "<tr><td>sdfsf</td><td>dsfsdf</td><td>23424</td></tr>"也许是因为这个？你看到的是 c# 中字符串的插值。
我试着这样做，但结果是一样的。 string htmlRow = "<tr><td>" + book.Name + "</td><td>" + book.Author + "</td><td>" + book.Price + "</td></tr>";
我有一种感觉，其实是MyDT中除了html代码之外，还有一个d:以上是关于使用ajax向表格和页面添加条目的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery ajax 和 PHP 复制到 mySQL 的条目
随笔：ajax传递数组，layui父子页面传值，下来菜单赋值，父页面数据获取，表格数据替换为字符串