AJAX および PHP を介して JQuery モバイルフォームを送信する (2 つの記事)-PHPチュートリアル-php.cn

AJAX および PHP を介して JQuery モバイルフォームを送信する (2 つの記事)

PHP中文网

リリース： 2016-08-08 09:31:26

オリジナル

1371 人が閲覧しました

AJAX および PHP 経由で jQuery モバイルフォームを送信

+++++++++++++++++++++++++ ++++++++++++++++ ++++++++++++++++++++++++

jQueryモバイルフォーム送信

http://blog.csdn.net/tjpu_lin/article/details/ 28394253

最近、jQuery mobile を使用してモバイルページを開発していましたが、フォームの送信時に問題が発生しました。

バックグラウンドはサーブレットによって処理されます。サーブレットのリダイレクトを使用してページにジャンプし、携帯電話に転送したい場合は、エラーページのメッセージが表示されます。

オンライン情報と jQuery モバイル API を調べた結果、jQuery モバイルフォームの送信はデフォルトで ajax 送信になるため、サーブレットにページジャンプが記述されている場合、ページジャンプ機能はまったく実装されないことがわかりました。
そこで、チュートリアルに従ってフォームに属性 data-ajax="false" を追加したところ、ページジャンプが実行できないだけでなく、バックグラウンドのデータベース操作も実行できず、500 エラーが報告されることがわかりました。。

私は ajax を使って送信するので、ajax を使ってページをジャンプしようと長い間考えていました

<?php  
    $firstName = $_POST[firstName];  
    $lastName = $_POST[lastName];  
       
    echo("First Name: " . $firstName . " Last Name: " . $lastName);  
?>

ログイン後にコピー

<!DOCTYPE html>  
<html>  
    <head>  
    <title>Submit a form via AJAX</title>  
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />  
      <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>  
      <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>  
</head>  
<body>  
    <script>  
        function onSuccess(data, status)  
        {  
            data = $.trim(data);  
            $("#notification").text(data);  
        }  
    
        function onError(data, status)  
        {  
            // handle an error  
        }          
    
        $(document).ready(function() {  
            $("#submit").click(function(){  
    
                var formData = $("#callAjaxForm").serialize();  
    
                $.ajax({  
                    type: "POST",  
                    url: "callajax.php",  
                    cache: false,  
                    data: formData,  
                    success: onSuccess,  
                    error: onError  
                });  
    
                return false;  
            });  
        });  
    </script>  
    
    <!-- call ajax page -->  
    <div data-role="page" id="callAjaxPage">  
        <div data-role="header">  
            <h1>Call Ajax</h1>  
        </div>  
    
        <div data-role="content">  
            <form id="callAjaxForm">  
                <div data-role="fieldcontain">  
                    <label for="firstName">First Name</label>  
                    <input type="text" name="firstName" id="firstName" value=""  />  
   
                    <label for="lastName">Last Name</label>  
                    <input type="text" name="lastName" id="lastName" value=""  />  
                    <h3 id="notification"></h3>  
                    <button data-theme="b" id="submit" type="submit">Submit</button>  
                </div>  
            </form>  
        </div>  
    
        <div data-role="footer">  
            <h1>GiantFlyingSaucer</h1>  
        </div>  
    </div>  
</body>  
</html>

ログイン後にコピー

<script type="text/javascript">  
        $(document).ready(function () {  
            $("#submitbtn").click(function(){  
                    cache: false,  
                    $.ajax({  
                      type: "POST",  
                      url: "feedback",  
                      data: $(&#39;#feedbackform&#39;).serialize(),  
                      success:function(data){  
                            $.mobile.changePage("success.html");  
                      }  
                });  
            });  
  
        });

ログイン後にコピー

のデータが必要であることに注意してください。そうでない場合は、サーブレットの requset.getParameter によって受け入れられたデータがnull、ajax、およびバックグラウンドでの操作が成功した後、changePage を使用して、成功後に表示されるページにジャンプします。

上記では、AJAX と PHP を介して JQuery Mobile フォームを送信する方法 (2 つの記事) を紹介しています。関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。