jQueryのajaxでjsonをpost送信しようとするとHTMLが出力される。

Question

以下のようにajax通信でjsonをpostするソースを作成しました。

<button type="button"></button>

$("button").click(function() {

var data = {
        name:'山田',
        age: '24才'
    };

$.ajax({
        type:"post",
        url:"POST送信先のURL",
        data:JSON.stringify(data),
        contentType: 'application/json',
        dataType: "json",
        success: function(json_data) {
            location.reload();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown)  {
            alert("エラー");

console.log("XMLHttpRequest : " + XMLHttpRequest.status);
　　console.log("textStatus     : " + textStatus);
　　console.log("errorThrown    : " + errorThrown.message);

        },
        complete: function() {
            button.attr("disabled", false);
        }
    });

});

postで送信しようとしたところ以下のようなエラーが発生し、送信できず

Unexpected token < in JSON at position 0

原因を見たところどうやら、dataになぜかjson文字列ではなくpost元のHTMLが出力されてしまいます。
HTMLが出力される原因がわからず、ご教示いただけると幸いです。

Comments

[sousuke]

htmlやpostを捌いている方も提示しないと回答が付きにくいと思います。

[out]

htmlはボタンのみで、postはXMLHttpRequest, textStatus, errorThrownあたりでデバッグしていました

Answer 1

ajaxしているのに成功時にreloadしては非同期の意味がないのでは？
success/error構文は古いのでdone/failのメソッドチェーンに変更してください
データの渡し方もちょっとおかしいです

  $.ajax({
  url:"send.php",
  type:"post",
  data:{a:10,b:20},
  }).done(function(data){
    console.log(data);
  })

とするか,formdataをつかってこうしてください

  var fd=new FormData();
  fd.append("a",30);
  fd.append("b",40);
  $.ajax({
  url:"send.php",
  type:"post",
  data:fd,
  processData: false,
  contentType: false,
  }).done(function(data){
    console.log(data);
  })

Comments

[out]

ありがとうございました！