0

私ができるようにしたいのは、フォームデータをphpファイルに渡し、結果をアプリに戻して、ユーザーがいつでもphpファイルに直接アクセスしないようにすることです。

これは私が思いついたものですが、データを渡すこともできません。-disable-web-security で chrome を使用しました。常にfalseを返すので、データがphpファイルに渡されていないと思います。どんな助けでも素晴らしいでしょう。また。結果ページに転送すると、数秒後に空白になります。ありがとうございました。

HTML

<form id="form"   method="POST"  data-ajax="false" data-transition="pop" data-direction="reverse">
            <fieldset>


            <label for="name" class="ui-hidden-accessible">Name</label>
            <input type="text" name="name" id="name" value=""  class="required" placeholder="Name"/>


            <label for="email" class="ui-hidden-accessible">E-Mail</label>
            <input type="email" name="email" id="email" value="" class="required" placeholder="E-Mail"/>


            <label for="memory" class="ui-hidden-accessible">Memory</label>
            <textarea name="memory" name="memory" id="memory"  class="required" placeholder="Your Memory..."></textarea>



            <label for="submit" class="ui-hidden-accessible">Submit</label>
            <input type="submit" name="submit" id="submit" value="SEND">

             </fieldset>
        </form>

JS

$(document).on('pagebeforeshow', '#formPage', function(){

$(document).on('click', '#submit', function() { // catch the form's submit event

    if($('#name').val().length > 0 && $('#email').val().length > 0 && $('#memory').val().length > 0){


        var that = $(this),
            contents = that.serialize();


        // Send data to server through ajax call
        // action is functionality we want to call and outputJSON is our data


        $.ajax({
            url: 'http://www....',
            dataType: 'json',
            type: 'post',
            data: contents,
            async: true,
            beforeSend: function() {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },

            success: function(data) {
                console.log(data);


            },
            error: function (request,error) {
                // This callback function will trigger on unsuccessful action
                alert('Network error has occurred please try again!');
            }
        });


    } else {
        alert('Please fill all nececery fields');
    }
    return false; // cancel original event to prevent form submitting
});
});

PHP

header('Content-type: text/javascript');

$json = array(
'success'       => false,
'result'        => 0


);

if(isset($_POST['name'], $_POST['email'], $_POST['memory'])){

$name       = $_POST['name'];
$email      = $_POST['email'];
$memory     = $_POST['memory'];

$json['success'] = true;
$json['result']  = $name;

}

echo json_encode($json);
4

1 に答える 1

1

フォーム データを正しくシリアル化していないため、contents 変数が空になります。

このコードを変更します。

  var that = $(this),
  contents = that.serialize();

これに:

 //var that = $(this),  // <-- delete this line
 contents = $('#form').serialize();

あなたも修正する必要があります..

あなたはまだ気付いていませんが、クリック ハンドラーを bagebeforeshow イベントに配置することで、複数のクリック バインドの問題を作成しました。それを防ぐためには、

このコードを変更します。

 $(document).on('pagebeforeshow', '#formPage', function(){

これに:

 $(document).on('pageinit', '#formPage', function(){

このようにして$(document).on('click', '#submit', function() {、ユーザーが「#formPage」ページを何回離れて戻ってきても、バインドされるのは 1 回だけです。

編集済み

いいえ、ajax 経由でバックエンド PHP プログラムに送信されたデータは、json エンコードされていません。これは標準の HTTP POST データであり、$_POST (または $_REQUEST) を介してアクセスされます。

あなたのコード (上記の回答で概説した変更を含む) がサーバー上で動作しています。参照用に、コードをテストするためにセットアップした 2 つのファイルをパスビンに配置しました。

php ファイル:

(お使いの環境に合わせて、含まれている JavaScript ファイルへのパスを編集します)

sandbox_ajax_form.php

JavaScript ファイル:

(フォームデータが送信されるパスを編集します)

sandbox_ajax_form.js

于 2013-08-14T21:30:48.750 に答える