1

我已经使用 PhoneGap 和 jQuery Mobile 开始了一个迷你项目。

<title>PhoneGap</title>


<link rel="stylesheet" href="css/jquery.mobile.css"/>

<script type="text/javascript"  src="js/jquery.js"></script>
<script type="text/javascript"  src="js/jquerym.js"></script>
<script type="text/javascript"  src="js/myscript.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.3.0.js"></script>


<div id ="page1" data-role="page">
    <div data-role ="header">
        <h1>Welcome to Page 1</h1>
    </div>
    <a href="#page2" data-transition="flip">Page2</a>
</div>

<div id ="page2" data-role="page">
    <div data-role ="header">
        <h1>Welcome to Page 2</h1>
    </div>

    <form>
        First name: <input type="text" name="name" id="username"><br>
        Last name: <input type="text" name="surname" id="usersurname"><br>
        <input type="submit" id ="submit" name="submit" value="GO TIME">
    </form>
    <a href="#page1" data-transition="flip">Page1</a>
</div>

现在我在 Codeigniter 中创建了一个控制器，并希望使用 ajax 与控制器中的特定方法对话，然后让该方法做出响应。这是我的ajax代码：

$(document).ready(
function(){
            $('#submit').click(function() 
            {
                var name = $("#username").val();
                var surname = $("#usersurname").val();

                $.post(
                    "http://localhost:8080/bookbay/index.php/Home/test", 
                    {'name':name,'surname':surname},
                    function(data)
                    {
                        alert(data.name + " " + data.surname);
                    },
                    "json");
            });         
          });

这是我的控制器：

class Home extends CI_Controller
{
    function test()
    {
        $name = $this->input->post('name');
        $surname = $this->input->post('surname');
        $array = array('name' => "*".$name."*", 'surname'=> "?".$surname."?");
        echo json_encode($array);
    }
}

现在，当我单击提交按钮时，它只会将我转发到第 1 页？我不确定我做错了什么

4

1 回答 1

2

这是因为$(document).ready(不能与jQuery Mobile.

在我的博客文章中，您将了解为什么这很重要以及更多关于jQuery Mobile页面事件的信息。或者你可以看看这里。

您应该将代码更改为：

$(document).on('pagebeforeshow', '#page2', function(){       
   $('#submit').click(function() 
   {
       var name = $("#username").val();
       var surname = $("#usersurname").val();

       $.post(
           "http://localhost:8080/bookbay/index.php/Home/test", 
           {'name':name,'surname':surname},
           function(data)
           {
               alert(data.name + " " + data.surname);
           },
           "json");
   });
});
于 2013-01-28T14:50:55.053 回答