使用angular $ http.post方法时未正确捕获JSON字符串

Question

我在更改下拉列值时使用了 $ http.post 方法。哪个会调用asmx文件方法，我已经返回了json字符串。但是在然后方法中没有捕获到显示以下错误的JSON字符串。

  

错误：[$ http：baddata] http://errors.angularjs.org/1.6.6/ $ http / baddata？p0 =％5B％7B％22St_Id％22％3A1％2C％22Name％22％3A％22Shan％22％2C％22Grade％ 22％3A％22S％22％2C％22Native％22％3A％22London％22％7D％5D％7B％22D％22％3Anull％7D＆安培; P1 =％7B％7D

我如何摆脱这个问题，

HTML：

    <div>
    Select ID:
    <select ng-model="selid" ng-change="getStuData({{selid}})">
        <option ng-repeat="id in stuID" value="{{id}}">{{id}}</option>

    </select>
    <input type="button" ng-click="AddData()" value="ADD" />
    <br /><br />
    <strong> Student validation form:</strong><br /><br />
    <form name="stuForm" novalidate>
        <table class="studetail">
            <tr>
                <td>
                    <span>Student ID:</span>
                </td>
                <td><input type="text" ng-model="stuId" name="stuId" required /></td>
            </tr>
            <tr>
                <td>
                    <span>Student Name:</span>
                </td>
                <td>
                    <input type="text" ng-model="stuName" name="stuName" ng-maxlength="10" required />
                    <span ng-show="stuForm.stuName.$error.required && !stuForm.stuName.$untouched">Student Name required</span>
                    <span ng-show="stuForm.stuName.$error.maxlength">Maximum exceed</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>Grade:</span>
                </td>
                <td>   <input type="text" ng-model="grade" name="grade" required /></td>
            </tr>
            <tr>
                <td>
                    <span>Native:</span>
                </td>
                <td>     <input type="text" ng-model="native" name="native" required /></td>
            </tr>

            <tr>
                <td>
                    <span>DOB:</span>
                </td>
                <td>     <input type="date" ng-model="native" name="native" required /></td>
            </tr>
        </table>
    </form>
</div>

JS

    var app = angular.module("app", []);
app.controller("firstCtrl", function ($scope, $rootScope, $http) {
    var getData = $http.get('GetData.asmx/GetAllId');
    getData.then(function (response) {
        $scope.stuID = response.data;
    });
    var config = {
        headers: {
            'Content-Type': 'application/json;charset=utf-8;'
        }
    };
    $scope.getStuData = function () {
        var student = $http.post('GetData.asmx/GetStuData', { ID: $scope.selid }, config);
        student.then(function (response) {
            console.log(response);
        }, function (e) {
            console.log(e);
        });
    }
});

ASMX：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;

namespace WebApplication_ng
{
    /// <summary>
    /// Summary description for GetData
    /// </summary>
    [ScriptService]
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    // [System.Web.Script.Services.ScriptService]
    public class GetData : System.Web.Services.WebService
    {

        string connectionString = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void Details()
        {
            List<StudentDetails> details = new List<StudentDetails>();
            try
            {
                using (SqlConnection conn = new SqlConnection(connectionString))
                {
                    conn.Open();
                    SqlCommand com = new SqlCommand("Select * from St_Detail", conn);
                    SqlDataReader reader = com.ExecuteReader();
                    while (reader.Read())
                    {
                        details.Add(new StudentDetails() { St_Id = (int)reader.GetValue(0), Name = (string)reader.GetValue(1), Grade = (string)reader.GetValue(2), Native = (string)reader.GetValue(3) });
                    }
                }
            }
            catch (Exception ex)
            {
                this.Context.Response.Write(ex.Message);
            }
            this.Context.Response.Write(new JavaScriptSerializer().Serialize(details));
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void GetAllId()
        {
            List<int> Id = new List<int>();
            try
            {
                using (SqlConnection conn = new SqlConnection(connectionString))
                {
                    conn.Open();
                    SqlCommand com = new SqlCommand("Select St_Id from St_Detail", conn);
                    SqlDataReader reader = com.ExecuteReader();
                    while (reader.Read())
                    {
                        Id.Add((int)reader.GetValue(0));
                    }
                }
            }
            catch (Exception ex)
            {
                this.Context.Response.Write(ex.Message);
            }
            this.Context.Response.Write(new JavaScriptSerializer().Serialize(Id));
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void GetStuData(int ID)
        {
            List<StudentDetails> stu = new List<StudentDetails>();
            try
            {
                using (SqlConnection conn = new SqlConnection(connectionString))
                {
                    conn.Open();
                    SqlCommand com = new SqlCommand("Select * from St_Detail where St_Id =" + ID, conn);
                    SqlDataReader reader = com.ExecuteReader();
                    while (reader.Read())
                    {
                        stu.Add(new StudentDetails()
                        {
                            St_Id = (int)reader.GetValue(0),
                            Name = (string)reader.GetValue(1),
                            Grade = (string)reader.GetValue(2),
                            Native = (string)reader.GetValue(3),
                            //  DOB = (DateTime)reader.GetValue(4)
                        });
                    }
                }
            }
            catch (Exception ex)
            {
                this.Context.Response.Write(ex.Message);
            }
            //this.Context.Response.ContentType = "application/json";
            this.Context.Response.Write(new JavaScriptSerializer().Serialize(stu));
        }

        public class StudentDetails
        {
            public int St_Id { get; set; }
            public string Name { get; set; }
            public string Grade { get; set; }
            public string Native { get; set; }
            // public DateTime DOB { get; set; }
        }
    }
}

这里 GetStuData 方法将记录作为JSON字符串返回，但是在$ http.post中没有正确处理。我错过了什么吗？