各位高手們
是這樣的,我前幾天PO了一個問題:
如何在網頁上print 出 AJAX POST 給ASP.NET的 data
測試是ok了,但是如果要改為JSON傳遞的話我試了老半天還是兜不出來
以下是json.aspx
using System;
...
//private string sId = HttpRequest.Params["obj"]
public partial class json : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ContentType = "text/plain";
string os = Request.Form["os"];
string software = Request.Form["software"];
Response.Write("您選擇的作業系統: " + os + "\n" + "您選擇的軟體: " + software);
Response.End();
}
}
<h1>請選擇商品</h1>
<form id="form">
<%--<div class="os">--%>
<h1>作業系統</h1>
<input type="checkbox" name="macOS" id="mac" value="macOS" class="os">
<label for="mac">mac</label>
<br>
<input type="checkbox" name="android" id="android" value="android" class="os">
<label for="android">android</label>
<br>
<input type="checkbox" name="windows" id="windows" value="windows" class="os" checked>
<label for="windows">windows</label>
<br>
<input type="checkbox" name="linux" id="linux" value="linux" class="os" checked>
<label for="linux">linux</label>
<br>
<h1>軟體</h1>
<input type="checkbox" name="word" id="word" value="word" class="software" checked>
<label for="word">word</label>
<br>
<input type="checkbox" name="ppt" id="ppt" value="ppt" class="software" checked>
<label for="ppt">ppt</label>
<br>
<input type="checkbox" name="photoshop" id="photoshop" value="photoshop" class="software">
<label for="photoshop">photoshop</label>
<br>
<input type="checkbox" name="skype" id="skype" value="skype" class="software">
<label for="skype">skype</label>
<br>
<input type="checkbox" name="excel" id="excel" value="excel" class="software" checked>
<label for="excel">excel</label>
<br>
<input type="checkbox" name="cloud" id="雲" value="雲" class="software">
<label for="雲">雲</label>
<br>
<input type="button" value="送出" id="submit">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
var os = $('#form input[type="checkbox"].os')
var software = $('#form input[type="checkbox"].software')
var ary1 = [];
var ary2 = [];
function ajaxpost() {
//push進陣列
for (i = 0; i < os.length; i++) {
if (os[i].checked) {
ary1.push(os[i].value);
}
}
for (i = 0; i < software.length; i++) {
if (software[i].checked) {
ary2.push(software[i].value);
}
}
...
var obj = { os: ary1, software: ary2, }
console.log(obj);
var stringify_obj = JSON.stringify(obj);
console.log(stringify_obj);
$.ajax({
type: "post",
url: "json.aspx",
data: stringify_obj,//使用 obj當data的話 搭配 contentType: "application/json; charset=utf-8" 就會收到想要的正確資料
traditional: true,
dataType: "text",
contentType: "application/json; charset=utf-8",// 這行如果註解掉就會正常有值 why? 是因為 dataType: "text"嗎設定正確嗎
success: function (response) {
alert(response);
console.log(this);
console.log(response);
console.log(this.data);
},
error: function (XMLHttpRequest, textStatus, errorThrown, response) {
alert("readyState is" +XMLHttpRequest.readyState);
alert("status is" +XMLHttpRequest.status);
alert("responseText is " +XMLHttpRequest.responseText);
//alert(response);
//alert(console.error(url, status, err.toString()));
console.log(this.data)
}.bind(this)
});
ary1 = [];
ary2 = [];
}
var submitBtn = $('#submit');
submitBtn.on('click', ajaxpost);
});
</script>
我發現如果使用data: obj
而不是data: stringify_obj
再把
$.AJAX中的 contentType: "application/json; charset=utf-8"
再把這行註解掉就會會收到我想要的正確資料格式
//向是這樣
您選擇的作業系統: windows,linux
您選擇的軟體: word,ppt,excel
以下是我的問題
1.如果使用上面所說的做法是否就不是使用正確的json格式再傳遞了?
2.如果想要用JSON格式傳遞的話該怎麼做才能收到正確的字串呢?
3.是不是需要在.aspx那邊需要對資料做甚麼轉換嗎?
4.還是其實不應該使用Request.Form而改用其他更好的方法呢?
謝謝