0
私は、特にjQueryとWebservicesのプログラミングには初めてです。私は値をWebサービス経由でデータベースに渡したいと思います。以下はjQueryがWebサービスを呼び出さない
は、.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>
私はデバッグツールを使用して写真は正しい値が含まれていることを確認することができます。それは私が確信しているwebserviceの部分を呼び出すだけです。
ご協力いただければ幸いです。 URL内のファイル名として
data: photos,
おかげ
お返事ありがとうございます。 タイプ： "POST"、 url： "WebService.asmx/updateOrder"、 data：JSON.stringify（photos）、 contentType： "application"というコードを変更することを意味しますか？/json; charset = utf-8 "、 – AJsStack
ご連絡ありがとうございます。 charset = UTF;「JSON： タイプ： "POST"、 URL： "WebService.asmx/updateOrder"、 データ：写真、 のcontentType私はあなたにコードを変更する意味ですか、データのシリアル化が何であるかを知りません-8 "、 var photosリストが更新された後、$ .ajaxメソッドが自動的にどのように自動的に実行されますか？申し訳ありませんが、おそらく愚かな質問、私の初めてのwebservicesとjavascriptを使用して質問しています。 ありがとう – AJsStack
@Atiq Javed：はい、 'JSON.stringify'呼び出しを削除してください。あなたは 'JSON.stringify'メソッドを使ってデータをシリアル化していますが、それは間違った方法でシリアル化します。 'photos'オブジェクトをメソッドに送るだけで、正しくそれをそれ自身でシリアライズします。 $ .ajax呼び出しは、 'photos'変数が作成された後に実行されます。そこでは奇妙なことは起こっていない、彼らはコードの中でお互いの後ろに横たわっているので、最初は実行され、次にもう一つは実行される。 – Guffa