0
我是新手,尤其是jQuery和webservices編程。我想通過webservice將值傳遞給數據庫。jQuery不調用webservice
下面是在.aspx頁面的代碼:我使用的調試工具,可以確認的是,照片包含正確的價值觀
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
$("#sortable input[type=text]").width($("#sortable img").width() - 10);
$("#sortable label").mouseover(function() {
$(this).parent().children("input[type=text]").show().val($(this).html());
$(this).hide();
});
$("#sortable input[type=text]").mouseout(function() {
$(this).parent().children("label").show().html($(this).val());
$(this).hide();
});
$(".ContainerDiv").hover(
function() {
$(this).find(".deleteClass").show();
},
function() {
$(this).find(".deleteClass").hide();
});
$(".deleteClass").click(function() {
$(this).closest("li").remove();
});
$("#orderPhoto").click(function() {
var photos = $.map($("li.ui-state-default"), function (item, index) {
var imgDetail = new Object();
imgDetail.Id = $(item).find("img").attr("id");
imgDetail.Caption = $(item).find("label").html();
imgDetail.Order = index + 1;
return imgDetail;
});
//photos contains all the photo and order and the chhanged caption.
//pass to server
$.ajax({
type: "POST",
url: "WebService.asmx/updateOrder",
data: JSON.stringify(photos),
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d === "saved") {
$("<p>").text("New order saved!")
.addClass("success").appendTo("#left");
} else {
$("<p>").text("Save failed")
.addClass("failure").appendTo("#left");
}
}
});
});
});
</script>
<style type="text/css">
#sortable
{
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li
{
position: relative;
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
text-align: left;
}
.deleteClass
{
/* PhotoListItem is relative so relative to it */
position: absolute;
top: 1px;
right: 3px;
background: black;
color: Red;
font-weight: bold;
font-size: 12px;
padding: 5px;
opacity: 0.60;
filter: alpha(opacity="60");
margin-top: 3px;
display: none;
cursor: pointer;
}
.deleteClass:hover
{
opacity: 0.90;
filter: alpha(opacity="90");
}
.image_resize {
width: 250px;
height: 250px;
border: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" GroupItemCount="15">
<LayoutTemplate>
<ul id="sortable">
<li id="groupPlaceholder" runat="server">1</li>
</ul>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<li class="ui-state-default">
<div class="ContainerDiv">
<div class="deleteClass">X</div>
<img id='<%#Eval("photo_id")%>' src='<%# "uploads/"+Eval("photo_file_name")%>' alt="" class="image_resize" />
<div style="height: 25px; margin-top: 3px">
<label>
<%# Eval("photo_title")%></label>
<input type="text" style="display: none" />
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
<input type="button" id="orderPhoto" value="Save change" />
</form>
</body>
</html>
。它只是調用我不確定的web服務部分。
任何幫助將不勝感激。
感謝
感謝您的及時回覆。我不知道系列化的數據是什麼,你的意思是改變代碼爲: 類型:「POST」, url:「WebService.asmx/updateOrder」, data:JSON.stringify(photos), contentType:「application/json; charset = utf-8「, – AJsStack 2011-02-07 00:14:22