iT邦幫忙

0

AJAX POST JSON 給.aspx得不到回應

各位高手們
是這樣的,我前幾天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而改用其他更好的方法呢?

謝謝

補充:
這是我用開發者工具查看ajax內容的畫面
有正常回應的(但應該不是json格式)
Imgur
沒有回應的
Imgur

看更多先前的討論...收起先前的討論...
froce iT邦高手 1 級 ‧ 2018-09-05 13:27:15 檢舉
你有沒有用開發者工具看一下ajax傳回來的是什麼?
Homura iT邦研究生 2 級 ‧ 2018-09-05 13:39:39 檢舉
你C#的CntentType沒有改成 application/json
還有Json應該要用一個物件包起來
參考
https://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/
larrykkk iT邦新手 5 級 ‧ 2018-09-05 14:22:15 檢舉
@froce 上面有補充兩個imgur連結了 不知道是不是你指的傳回來的東西
@Homura 請問是C# 那邊的string要用物件包起來嗎? 因為我JS那邊有用JSON.stringify了
console.log()出來是: {"os":["windows","linux"],"software":["word","ppt","excel"]} 應該是正確的JSON對吧
Homura iT邦研究生 2 級 ‧ 2018-09-05 14:46:50 檢舉
格式是對的
原來你是傳回後端是json
那你得使用json.net把他物件化
C#才看得懂
參考暗黑大的文章
http://blog.darkthread.net/post-2010-06-05-json-net-jobject-example.aspx
優悠 iT邦新手 4 級 ‧ 2018-09-06 09:06:06 檢舉
json序列化跟json反序列化,可以用關鍵字查看看,你的問題應該是這兩個
larrykkk iT邦新手 5 級 ‧ 2018-09-06 11:00:27 檢舉
想請問一下,為何我使用
```
string os = Request.Form["os"]; OR
string software = Request.Form["software"]; OR
string json = Request.Form["stringify_obj"];
```
都會收到空值呢
Homura iT邦研究生 2 級 ‧ 2018-09-06 11:42:14 檢舉
因為你現在傳回來的是JSON
不是Form Data了....
正常丟回後端用Form Data就好了
後端丟回前端在用Json
larrykkk iT邦新手 5 級 ‧ 2018-09-07 14:51:53 檢舉
謝謝各位,應該算是搞定了

尚未有邦友回答

立即登入回答