CordovaにAjax通信でログイン機構を追加したい

前提・実現したいこと

初めての投稿となります。
CordovaとOnsenUIでハイブリッドアプリからログインする仕組みを作りたいと考えております。
今回はEC-CUBE4の既存のMySQLを使用したいので、ajax通信でメールアドレスとパスワードをPHPに送信し、
MySQLのデータと照合して成功した場合通常画面のHTMLに遷移させたいのですが、どのように改善すればいいでしょうか。
ログイン画面はons-navigatorタグで最前面に表示しています。
JavaScriptとは初心者の為、大変申し訳ないのですがどなたか教えて頂けないでしょうか。
よろしくお願いいたします。

該当のソースコード

HTML
1<ons-page class="login">
2    <div class="container">
3        <p class="login_title">ログイン</p>
4        <p>
5            <ons-input id="email" name="email" class="login_input" modfiler="underbar" type="email" placeholder="メールアドレス" float>
6            </ons-input><br>
7            <ons-input id="password" name="password" class="login_input" modfiler="underbar" type="password" placeholder="パスワード" float>
8            </ons-input>
9        </p>
10        <p>
11            <ons-button type="submit" id="ajax" class="login_button">ログイン</ons-button>
12        </p>
13        <br>
14        <a href="register.html" onclick="document.querySelector('#navigator').pushPage('register.html')">初めてご利用ですか？新規登録はこちら</a>
15    </div>
16</ons-page>

index.jsは

Javascript
1<script type="text/javascript">
2$(function() {
3    //ログインボタンを押した場合
4    $('ajax').click(function() {
5        $.ajax( {
6            url: "PHPのURL",
7            type: 'POST',
8            crossDomain: true,
9            data: {
10                'email':$('#email').val(),
11                'password':$('#password').val()
12            },
13            dataType: "json",
14            success: function (data) {
15              alert("success");
16            },
17            error: function (XMLHttpRequest, textStatus, errorThrown) {
18              alert("error");
19            }
20        })
21    })
22})
23</script>

request.phpは

PHP
1<?php
2header("Content-Type: application/json; charset=UTF-8");
3
4$user = 'hoge';
5$pass = 'hogehoge';
6
7$email = $_POST['email'];
8$password = $_POST['password'];
9
10$pdo = new PDO('mysql:host=localhost;dbname=eccube_db_2', $user, $pass);
11
12$stmt = $pdo->prepare('SELECT * FROM dtb_customer WHERE email = ?');
13$stmt->execute(array($email));
14
15if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
16    $salt = $row['salt'];
17    $hash_password = hash_hmac('SHA256', $password.':'.'NFXwzxb5o9hfELny04AaoY0SgLRHrJlc', $salt);
18    $db_password = $row['password'];
19    if ($hash_password == $db_password) {
20        $result = "success";
21        json_encode($result);
22    }
23}

となっております。

###　追記

「やって欲しいことだけを記載した丸投げの質問」とのご指摘を受けた為、質問の内容を変更しました。

m.ts10806

2019/05/12 03:02

タイトルが日本語としておかしいので調整いただくとして要は「ajaxで実行したphpでMySQLに接続できていない」ということでしょうか。どのようにして現象確認されたのですか？具体的に記載してください。またdataTypeをjsonに指定しているので呼び出しているURLの返りがJSON形式でない場合はエラーとなるはずです。 phpで$emailをechoされてますが、これが原因で正しく動作してないとかではないですか？

dauto

2019/05/12 06:27

ご返答ありがとうございます。タイトルは以前書いたタイトルがそのまま残っていた為修正しました。現象確認はechoで出力して確認したのですが、変数に値は代入されていませんでした。$emailをechoしている文は現象確認の消し忘れの為削除したのですが変わりませんでした。 datatypeについてですが、JavaScriptの使い方があまり分からないので、何処の構文をを変更すれば実装できるか教えて頂けると幸いです。

m.ts10806

2019/05/12 06:29

どうやって「代入されていない」ことを確認しましたか？

dauto

2019/05/12 06:35 編集

PHPでdisplay_errorsをOnに設定した際、「Undefined index:email Undefined index:password」と表示されたエラーで確認しました。

m.ts10806

2019/05/12 06:56

ajaxならバックグラウンド実行なのでdataTypeがJSONならそんなにハッキリエラーメッセージが見れることってないような。ブラウザから直に実行してませんか？

dauto

2019/05/12 07:18

ブラウザから実行してました、初歩的なミスで申し訳ありません...