[解決済み] JSONパースエラー シンタックスエラー 予期せぬ入力の終了

質問

次のようなコードになりました。

function pushJsonData(productName) {
    $.ajax({
        url: "/knockout/SaveProduct",
        type: "POST",
        contentType: "application/json",
        dataType: "json",
        data: " { \"Name\" : \"AA\" } ",
        async: false,
        success: function () {
            loadJsonData();   
        },
        error: function (jqXHR, textStatus, errorThrown) {
          alert(textStatus + " in pushJsonData: " + errorThrown + " " + jqXHR);
        }
    });
}

データ値をハードコードしたことに注意してください。データは正常にデータベースにプッシュされます。しかし、次のようなエラーが発生します。

パースエラー 構文エラー 予期しない入力の終了

私のデータは正しいJSON構文であることを確認しています。Chromeのインスペクタのネットワークで確認したところ、saveProductのリクエストはデータが正しいことを示しました。

{ "Name": "AA" }

このPOSTリクエストには応答がありませんでした。そのため、どこからパースエラーが発生したのか、さっぱりわかりません。FireFoxブラウザで試してみましたが、同じことが起こりました。

何が問題なのか、どなたかお分かりになる方はいらっしゃいますか？

ありがとうございます。

追伸 以下は、コントローラのコードです。

namespace MvcApplJSON.Controllers
{
    public class KnockoutController : Controller
    {
        //
        // GET: /Knockout/

        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public JsonResult GetProductList()
        {
            var model = new List<Product>();
            try
            {
                using (var db = new KOEntities())
                {
                    var product = from p in db.Products orderby p.Name select p;
                    model = product.ToList();
                }
            }
            catch (Exception ex)
            { throw ex; }
            return Json(model, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public void SaveProduct (Product product)
        {
            using (var db = new KOEntities())
            {
                db.Products.Add(new Product { Name = product.Name, DateCreated = DateTime.Now });
                db.SaveChanges();
            }
        }
    }
}

解決方法は？

何が問題なのか、はっきりしたことは言えません。文字が悪いのかもしれませんし、最初と最後に空白が残っているのかもしれません。

とにかく、あなたのようにJSONを文字列としてハードコーディングするべきではありません。JSONデータをサーバーに送信する正しい方法は、JSONシリアライザーを使用することです。

data: JSON.stringify({ name : "AA" }),

さて、サーバー上でも、この入力を受け取るための適切なビューモデルがあることを確認してください。

public class UserViewModel
{
    public string Name { get; set; }
}

と対応するアクションを指定します。

[HttpPost]
public ActionResult SaveProduct(UserViewModel model)
{
    ...
}

さて、もうひとつ。あなたが指定した dataType: 'json' . これは、サーバーがJSONの結果を返すことを期待していることを意味します。コントローラのアクションはJSONを返す必要があります。もしコントローラのアクションがビューを返すのであれば、 このエラーは説明がつきます。これは、jQuery がサーバからのレスポンスをパースしようとしたときに発生します。

[HttpPost]
public ActionResult SaveProduct(UserViewModel model)
{
    ...
    return Json(new { Foo = "bar" });
}

とはいえ、ほとんどの場合、通常は dataType プロパティは、ASP.NET MVC コントローラアクションに AJAX リクエストを行う際に使用します。この理由は、ある特定の ActionResult (例えば ViewResult または JsonResult )、フレームワークは自動的に正しい Content-Type jQueryはこのヘッダを使用してレスポンスをパースし、すでにパースされているsuccessコールバックのパラメータとして供給します。

ここであなたが抱えている問題は、サーバーが有効なJSONを返さなかったことだと思われます。ViewResultやPartialViewResultを返したか、コントローラのアクションで壊れたJSONを手動で作ろうとしたかです（これは明らかに、JsonResultを代わりに使うべきでないことですが）。

もうひとつ、今気づいたのですが

async: false,

この属性にfalseを設定することは避けてください。もし、この属性を false を実行すると、リクエストの実行中にクライアントブラウザがフリーズしてしまいます。この場合、通常のリクエストを行うだけでよいでしょう。もしAJAXを使いたいのであれば、非同期イベントとコールバックの観点から考え始めてください。