Ajax + PHP + DB SQL insert 不可

前提・実現したいこと

データベースにデータをINSERTしたい、が、parsererror になる。

index.php の46,47行は以下に当たる。
console.log(xhr);
console.log(textstatus);

発生している問題・エラーメッセージ

mysqliでMAMP、phpMyAdminデータベースにはコネクトはされる、
INSERT文が実行できない。
どうか、お助け下さいませ。

以下index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Build an API</title>
    <style>
        .btn {
            border: 1px solid black;
            padding: 10px;
            display: inline-block;
        }
    </style>
</head>

<body> ID :
    <input type="number" name="xid" id="xid" value="1">
    <br> Name :
    <input type="text" name="name" id="name" value="tester">
    <br> Company :
    <input type="text" name="company" id="company" value="company">
    <br> Cost :
    <input type="number" name="cost" id="cost" value="10">
    <br>
    <div class='btn' id="btn1">Send Data</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $('#btn1').on('click', function () {
                var vars = {
                    xid: $('#xid').val()
                    , name: $('#name').val()
                    , company: $('#company').val()
                    , cost: $('#cost').val()
                }
                $.ajax({
                    url: "api.php"
                    , data: vars
                    , type: "POST"
                    , dataType: 'json'
                }).done(function (d) {
                    console.log(d);
                }).fail(function (xhr, textstatus) {
                    console.log(xhr);
                    console.log(textstatus);
                })
            })
        })
    </script>
</body>

</html>

以下api.php

<?php

$con = new mysqli("localhost","[ユーザー]","[パスワ]","[データベース名]");

$arr = [];

if($con->ping()){ $arr['connected']= true; }else{ $arr['connected']= false;}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $arr['xid'] = $_POST['xid'];
    $arr['name'] = $_POST['name'];
    $arr['company'] = $_POST['company'];
    $arr['cost'] = $_POST['cost'];    
}else{
    $arr['xid'] = '100';
    $arr['name'] = 'noname';
    $arr['company'] = 'company';
    $arr['cost'] = '100'; 
}

$sql = $con->prepare("INSERT INTO `api`(`xid`,`cost`,`name`,`company`)VALUES(?,?,?,?)");
$rs = $sql->bind_param('iiss',$arr['xid'], $arr['cost'], $arr['name'], $arr['company']);

if($rs){
    $sql->execute();
    //$arr['id'] = $con->insert_id;
    echo "hello";
}

echo json_encode($arr);
?>

退会済みユーザー

2020/08/21 21:52 編集

まず一気に試している点がNGです。まずはAPIが正しく動作するのを確認して、その後ajaxが動くのを確認する方がいいです。そうしないと常に切り分けが必要になってしまいます。アホみたいに一気に試すなら、まずは1つずつ切り分けていかないといけません。今明確に分かっているのは、ajaxの結果がfailで、parse errorということだけです。まずはfailで指定できる関数の引数は3つあるので、最後の1つerrorThrownを表示させましょう。それでajaxのリクエストが正しくサーバーに伝わっているのかが分かります。

snakeriver

2020/08/26 08:36 編集

上記、ご丁寧にアドバイス頂きましてありがとうございます。 ajaxの動作確認を致しまして、 INSERT ですが、ユーザー、パスワード、テーブルのIDをAUTO INCREMENT を設定しましたら、出来ました。早速、errorThrownも利用致しました。ありがとうございました。

退会済みユーザー

2020/08/26 08:48

テーブルのIDはAUTO INCREMENTにはなりません。なるならテーブルのカラムでしょう。そしてそれで問題になっていたなら、テーブルのカラムは5つ以上あったということですね。そしてその場合はparse errorにはならないです。それ以前に問題があったはずです。質問をしているのに、足りない情報を聞いても答えないのでは、回答の意味なしですね。自己解決したなら、parse errorになった原因、そしてAUTO INCREMENTに設定する前のエラーの原因と対策を他の質問者さんが理解できるように、詳細に記述して回答してください。

行動規範の内容に同意します

回答2件

自己解決

DBの方で、ユーザー、パスワード、テーブルのIDをAUTO INCREMENT を設定しましたら、出来ました。
そして、以下クエリーの記述を変更。

$sql = "INSERT INTO api (xid, cost, name, company) VALUES ('$xid', '$cost', '$name', '$company')";
if (mysqli_query($con, $sql)) {
      echo "New record created successfully";
} else {
      echo "Error: " . $sql . "<br>" . mysqli_error($con);
}

投稿2020/08/26 08:40

snakeriver

総合スコア76