提交按钮在Jquery Mobile中不起作用

Question

嗨，大家好，我正在使用一个Web应用程序，该应用程序的左侧是一个菜单，右侧是一个div，当我单击菜单项时，该div会显示其他页面的内容，我正在使用Ajax使用以下代码来显示内容：

<script>
    $.ajax({
        url: "new_pm.php"
    }).done(function(data) {
        $("#content").html(data);
    });

    $("#content").on("click", "a", function(e) {
        e.preventDefault();
        var html = this.href;
        $("#content").load(html)
    });
</script>

上面代码的第二部分是获取内容中的链接，但问题是它适用于链接而不是按钮（输入）

这是加载页面的代码（new_pm.php）：

<?php
//We check if the user is logged
if(isset($_SESSION['id']))
{
$form = true;
$otitle = '';
$orecip = '';
$omessage = '';
//We check if the form has been sent
if(isset($_POST['title'], $_POST['recip'], $_POST['message']))
{
        $otitle = $_POST['title'];
        $orecip = $_POST['recip'];
        $omessage = $_POST['message'];

        //We remove slashes depending on the configuration

            if(get_magic_quotes_gpc())
        {       
                //$otitle = stripslashes($otitle);
                //$orecip = stripslashes($orecip);
                //$omessage = stripslashes($omessage);
        }

        //We check if all the fields are filled

        if($_POST['title']!='' and $_POST['recip']!='' and $_POST['message']!='')
        {
                //We protect the variables

               // $title = mysqli_real_escape_string($otitle);
                //$recip = mysqli_real_escape_string($orecip);
               // $message = mysqli_real_escape_string(nl2br(htmlentities($omessage, ENT_QUOTES, 'UTF-8')));

                //We check if the recipient exists

                $dn1 = mysqli_fetch_array(mysqli_query($link,'select count(id) as recip, id as recipid , (select count(*) from pm) as npm from users where email ="'.$orecip.'"'));

                if($dn1['recip']==1)

                {
                        //We check if the recipient is not the actual user

                        if($dn1['recipid']!=$_SESSION['id'])
                        {
                                $id = $dn1['npm']+1;

                                //We send the message

                                if(mysqli_query($link,'insert into pm (id, id2, title, user1, user2, message, timestamp, user1read, user2read)values("'.$id.'", "1", "'.$otitle.'", "'.$_SESSION['id'].'", "'.$dn1['recipid'].'", "'.$omessage.'", "'.time().'", "yes", "no")'))
                                {
?>
<div class="message">The message has successfully been sent.<br />
<a href="list_pm.php">List of my Personal messages</a></div>
<?php
                                        $form = false;
                                }
                                else
                                {
                                        //Otherwise, we say that an error occured
                                        $error = 'An error occurred while sending the message';
                                }
                        }
                        else
                        {
                                //Otherwise, we say the user cannot send a message to himself
                                $error = 'You cannot send a message to yourself.';
                        }
                }
                else
                {
                        //Otherwise, we say the recipient does not exists
                        $error = 'The recipient does not exists.';
                }
        }
        else
        {
                //Otherwise, we say a field is empty
                $error = 'A field is empty. Please fill of the fields.';
        }
}
elseif(isset($_GET['recip']))
{
        //We get the username for the recipient if available
        $orecip = $_GET['recip'];
}
if($form)
{
//We display a message if necessary
if(isset($error))
{
        echo '<div class="message">'.$error.'</div>';
}
//We display the form
?>
 <div class="container contentContainer" id="topContainer">
        <div class="row">

            <div class="col-md-12 " id="topRow">


    <form class="marginTop" action="new_pm.php" method="post">
              <div class="form-group required">           
        <label for="title"> Subject* </label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($otitle, ENT_QUOTES, 'UTF-8'); ?>" id="title" name="title" /><br />
              </div>

               <div class="form-group required">
        <label for="recip">Recipient<span class="small">(UserEmail)*</span></label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($orecip, ENT_QUOTES, 'UTF-8'); ?>" id="recip" name="recip" /><br />
               </div>

         <div class="form-group required">
        <label for="message">Message*</label>
        <textarea class="form-control marginBottom" cols="40" rows="5" id="message" name="message"><?php echo htmlentities($omessage, ENT_QUOTES, 'UTF-8'); ?></textarea><br />
        <input type="submit" value="Send"  class="btn btn-success"/>
       </div>
    </form>
</div>
</div>
</div>
<?php
}
}
else
{
        echo '<div class="message">You must be logged to access this page.</div>';
}
?>

当我单击提交按钮时，什么都没有发生，但是当我在新选项卡中加载new_pm.php本身并单击提交时，它可以正常工作并发送消息。

任何想法如何使其在div中相同。

非常感谢您的帮助。

Answer 1

创建一个名为ajax.php的文件

<?php
//We check if the user is logged
if(isset($_SESSION['id']))
{
$otitle = '';
$orecip = '';
$omessage = '';
//We check if the form has been sent
if(isset($_POST['title'], $_POST['recip'], $_POST['message']))
{
        $otitle = $_POST['title'];
        $orecip = $_POST['recip'];
        $omessage = $_POST['message'];

        //We remove slashes depending on the configuration

            if(get_magic_quotes_gpc())
        {       
                //$otitle = stripslashes($otitle);
                //$orecip = stripslashes($orecip);
                //$omessage = stripslashes($omessage);
        }

        //We check if all the fields are filled

        if($_POST['title']!='' and $_POST['recip']!='' and $_POST['message']!='')
        {
                //We protect the variables

               // $title = mysqli_real_escape_string($otitle);
                //$recip = mysqli_real_escape_string($orecip);
               // $message = mysqli_real_escape_string(nl2br(htmlentities($omessage, ENT_QUOTES, 'UTF-8')));

                //We check if the recipient exists

                $dn1 = mysqli_fetch_array(mysqli_query($link,'select count(id) as recip, id as recipid , (select count(*) from pm) as npm from users where email ="'.$orecip.'"'));

                if($dn1['recip']==1)

                {
                        //We check if the recipient is not the actual user

                        if($dn1['recipid']!=$_SESSION['id'])
                        {
                                $id = $dn1['npm']+1;

                                //We send the message

                                if(mysqli_query($link,'insert into pm (id, id2, title, user1, user2, message, timestamp, user1read, user2read)values("'.$id.'", "1", "'.$otitle.'", "'.$_SESSION['id'].'", "'.$dn1['recipid'].'", "'.$omessage.'", "'.time().'", "yes", "no")'))
                                {


                                        $form = false;
                                }
                                else
                                {
                                        //Otherwise, we say that an error occured
                                        $error = 'An error occurred while sending the message';
                                }
                        }
                        else
                        {
                                //Otherwise, we say the user cannot send a message to himself
                                $error = 'You cannot send a message to yourself.';
                        }
                }
                else
                {
                        //Otherwise, we say the recipient does not exists
                        $error = 'The recipient does not exists.';
                }
        }
        else
        {
                //Otherwise, we say a field is empty
                $error = 'A field is empty. Please fill of the fields.';
        }
}
elseif(isset($_GET['recip']))
{
        //We get the username for the recipient if available
        $orecip = $_GET['recip'];
}

//We display a message if necessary
if(isset($error))
{
        echo json_encode(array("message"=>$error));
} else {
      echo json_encode(array("message"=>"ok"));
}

}？>

下一个：

您的表单页面将如下所示：

head
body tag
...
 <div class="container contentContainer" id="topContainer">
        <div class="row">

            <div class="col-md-12 " id="topRow">


<div class="message">The message has successfully been sent.</div><br />
    <form class="marginTop newclass" action="new_pm.php" method="post">
              <div class="form-group required">           
        <label for="title"> Subject* </label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($otitle, ENT_QUOTES, 'UTF-8'); ?>" id="title" name="title" /><br />
              </div>

               <div class="form-group required">
        <label for="recip">Recipient<span class="small">(UserEmail)*</span></label>
        <input class="form-control marginBottom" type="text" value="<?php echo htmlentities($orecip, ENT_QUOTES, 'UTF-8'); ?>" id="recip" name="recip" /><br />
               </div>

         <div class="form-group required">
        <label for="message">Message*</label>
        <textarea class="form-control marginBottom" cols="40" rows="5" id="message" name="message"><?php echo htmlentities($omessage, ENT_QUOTES, 'UTF-8'); ?></textarea><br />
        <input type="submit" value="Send"  class="btn btn-success"/>
       </div>
    </form>
</div>
</div>
</div>

..
body tag

接下来，您的ajax应该看起来像这样，需要放在表单页面的页脚中

$(document).ready(function (){
$('input[type="submit"]').on("click",function(){
 $.ajax({
        url: "ajax.php"
        data:$(this).parent('form').serialize();
        success:function(data) {
           if(data.message == "ok") {
             $('.message').text('The message has successfully been sent.');
             $(this).parent('form').remove();
           }
           else {
             $('.message').text(data.message);
           }
        }
    });


    });
});

注意：带有链接：我在表单上追加了一个新类，现在您可以使用任何对象来触发ajax

$('a').on("click",function() {
     $.ajax({
            url: "ajax.php"
            data:$('.newclass').serialize();
            success:function(data) {
               if(data.message == "ok") {
                 $('.message').text('The message has successfully been sent.');
                 $('.newclass').remove();
               }
               else {
                 $('.message').text(data.message);
               }
            }
        });


        });

Answer 2

$(document).ready(function (e){
$.ajax({
    url: "new_pm.php"
}).done(function(data) {
    $("#content").html(data);
});

$("#content").on("click", "a", function(e) {
    e.preventDefault();
    var html = this.href;
    $("#content").load(html)
});});

使用此代码

Answer 3

非常感谢您提供完整的答案，但是ajax仅在有一个提交按钮且不适用于链接的情况下才起作用，我们可以在其中放入if语句吗？

    $(document).ready(function (){ if (input[type="submit"])
$('input[type="submit"]').on("click",function()
 $.ajax({
        url: "ajax.php"
        data:$(this).parent('form').serialize();
        success:function(data) {
           if(data.message == "ok") {
             $('.message').text('The message has successfully been sent.');
             $(this).parent('form').remove();
           }
           else {
             $('.message').text(data.message);
           }
        }
    })


    });        else (   $.ajax({
    url: "new_pm.php"
}).done(function(data) {
    $("#content").html(data);
});

$("#content").on("click", "a", function(e) {
    e.preventDefault();
    var html = this.href;
    $("#content").load(html)
});
});