Ajaxの結果がundefinedになります
受付中
回答 2
投稿
- 評価
- クリップ 0
- VIEW 3,947
どなたか、わかる方はご教示ください。
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
else
{
}
}
[WebMethod]
public static string countUp_click(int id, int count)
{
dynamic dataSet = new { id = id.ToString(), count = count++.ToString() };
var s = new System.Web.Script.Serialization.JavaScriptSerializer();
return s.Serialize(dataSet);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<head>
<title>Single-File Page Model</title>
<script src="Scripts/jquery-1.4.1.js"></script>
</head>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">
<input type="submit" id="countUp" value="カウントアップ" />
</div>
<div id="count">
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#countUp").click(function () {
var hostUrl = "WebForm1.aspx/countUp_click";
var param1 = 1;
var param2 = 10;
$.ajax({
url: hostUrl,
type: "POST",
dataType: "application/json; charset=UTF-8",
data: JSON.stringify('{ "id" : ' + param1 + ', "count" : ' + param2 + ' }'),
success: function (data) {
alert("ok");
// undefied と表示される
window.alert(data.id);
// undefied と表示される
window.alert(data.count);
$('#count').html(data.count);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
window.alert(XMLHttpRequest.toString());
window.alert(textStatus.toString());
window.alert(errorThrown.toString());
}
});
});
});
</script>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
else
{
}
}
[WebMethod]
public static string countUp_click(int id, int count)
{
count++;
var dataSet = new { id = id, count = count };
var s = new System.Web.Script.Serialization.JavaScriptSerializer();
return s.Serialize(dataSet);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Single-File Page Model</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">
<input type="button" id="countUp" value="カウントアップ" />
</div>
<div id="count">
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#countUp").click(function () {
var hostUrl = "WebForm1.aspx/countUp_click";
var param1 = 1;
var param2 = 10;
$.ajax({
url: hostUrl,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{'id' : " + param1 + ", 'count' : " + param2 + " }",
success: function (data) {
alert("ok");
// ここのパースがキモ
var jdata = JSON.parse(data.d);
window.alert(jdata.id);
window.alert(jdata.count);
$('#count').html(jdata.count);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
window.alert(XMLHttpRequest.toString());
window.alert(textStatus.toString());
window.alert(errorThrown.toString());
}
});
});
});
</script>
</body>
</html>
ただし素直にWebサービス使ったほうがいいと思います。
ASP.NETとC#4.0を使ったWebサービスの作成とjQueryからの呼び出し方
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
data: JSON.stringify('{ "id" : ' + param1 + ', "count" : ' + param2 + ' }'),
でなく、
data: JSON.stringify({id : param1, count : param2 }),
のようにしなければならないのでは?
今のままだと、json文字列をさらにjsonにしてしまっていると思います。
追記
dataTypeにcontentTypeが記述されてしまっていますね。 dataType: "application/json; charset=UTF-8",
でなく、
contentType: "application/json; charset=utf-8",
dataType: "json",
としなければならないと思います。投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/08/18 18:25
の部分を
$('#count').html('<p>' + jdata.count + '</p>');
に変えてみたのですが、カウントアップされた結果がブラウザに出力されません(T_T)
どう修正すればいいのでしょうか?
2015/08/18 18:34
alertは表示されていますか?
2015/08/18 23:11
2015/08/19 10:37
2015/08/20 11:40
2015/08/20 21:12
[{"count":10,"id":1},{"count":20,"id":2},{"count":30,"id":3}]
になっている場合、javascript側で出力する方法がわかりません。
調べたのですが、見つからないですorz
2015/08/21 09:48
http://www.buildinsider.net/web/jqueryref/011
2015/08/24 15:05
助けてください!
Service1.svc.csのコード
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
namespace AjaxTest
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
// HTTP GET を使用するために [WebGet] 属性を追加します (既定の ResponseFormat は WebMessageFormat.Json)。
// XML を返す操作を作成するには、
// [WebGet(ResponseFormat=WebMessageFormat.Xml)] を追加し、
// 操作本文に次の行を含めます:
// WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
[OperationContract]
public void DoWork()
{
// 操作の実装をここに追加してください
}
// 追加の操作をここに追加して、[OperationContract] とマークしてください
[OperationContract]
public static voteItem[] countUp_click(int id, int count)
{
int num = count + 1;
List<voteItem> items = new List<voteItem>();
for (int i = 0; i < 10; i++)
{
// ここでエラーになって、ビルドが通らない
items.Add(new voteItem(i + 1, (i + 1) * 10));
}
dynamic dataSet = new { id = id.ToString(), count = num.ToString() };
var s = new System.Web.Script.Serialization.JavaScriptSerializer();
Console.WriteLine(s.Serialize(dataSet));
return s.Serialize(dataSet);
}
}
public class voteItem
{
int id { get; set; }
int count { get; set; }
}
}
Web.configの内容
<?xml version="1.0"?>
<!--
ASP.NET アプリケーションを構成する方法の詳細については、
http://go.microsoft.com/fwlink/?LinkId=169433 を参照してください
-->
<configuration>
<connectionStrings>
<add name="ApplicationServices"
connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<!--<authentication mode="Forms">
<forms loginUrl="~/Account/Login.aspx" timeout="2880" />
</authentication>-->
<membership>
<providers>
<clear/>
<add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
applicationName="/" />
</providers>
</membership>
<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
</providers>
</profile>
<roleManager enabled="false">
<providers>
<clear/>
<add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
<add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
</providers>
</roleManager>
</system.web>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="MyServiceTypeBehaviors" >
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="AjaxTest.Service1">
<endpoint address="AjaxTest/Service1" behaviorConfiguration="AjaxTest.Service1AspNetAjaxBehavior"
binding="webHttpBinding" contract="AjaxTest.Service1" />
</service>
</services>
</system.serviceModel>
</configuration>
WebForm1.aspxの内容
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
//protected void Page_Load(object sender, EventArgs e)
//{
// if (!IsPostBack)
// {
// }
// else
// {
// }
//}
//[WebMethod]
//public static string countUp_click(int id, int count)
//{
// count++;
// var dataSet = new { id = id, count = count };
// var s = new System.Web.Script.Serialization.JavaScriptSerializer();
// return s.Serialize(dataSet);
//}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Single-File Page Model</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">
<input type="button" id="countUp" value="カウントアップ" />
</div>
<div id="count">
</div>
</form>
<ul id="result"></ul>
<script type="text/javascript">
$(document).ready(function () {
$("#countUp").click(function () {
//var hostUrl = "WebForm1.aspx/countUp_click";
var hostUrl = "Service1/countUp_click";
var param1 = 1;
var param2 = 10;
$.ajax({
url: hostUrl,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{'id' : " + param1 + ", 'count' : " + param2 + " }",
success: function (data) {
alert("ok");
// ここのパースがキモ
var jdata = JSON.parse(data.d);
// 配列jdataを順に処理
$.each(jdata,
function(index, elem) {
// 情報を「id(count)」の形式でリストに整形
$('<li></li>')
.append(elem.id + '(' + elem.count + ')')
.appendTo('#result');
}
//window.alert(jdata.id);
//window.alert(jdata.count);
$('#count').html(jdata.count);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
window.alert(XMLHttpRequest.toString());
window.alert(textStatus.toString());
window.alert(errorThrown.toString());
}
});
});
});
</script>
</body>
</html>