使用JSON传递数据

时间:2013-08-14 20:11:05

标签: json jquery-mobile cordova

我想成为什么样的人 我要做的是将表单数据传递给php文件,然后将结果传回app,这样用户就不会在任何时候直接访问php文件。

这是我想出来的但是我无法通过数据传递它。我使用chrome和-disable-web-security。它总是返回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);

1 个答案:

答案 0 :(得分:1)

您没有正确地序列化表单数据,结果是内容变量为空。

更改此代码:

  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(){

这样,无论用户离开多少次并返回“#formPage”页面,您的$(document).on('click', '#submit', function() {都只会被绑定一次

<强> EDITED

不,通过ajax提交给后端PHP程序的数据不是json编码的。它是标准的HTTP POST数据,可通过$ _POST(或$ _REQUEST)访问。

我的代码(我在上面的答案中概述的更改)在我的服务器上运行。我已将我设置的两个文件放在pastbin中测试您的代码供您参考:

php文件:

(编辑环境中包含的javascript文件的路径)

sandbox_ajax_form.php

javascript文件:

(编辑表单数据发送到的路径)

sandbox_ajax_form.js