Submitting JQuery Mobile forms through AJAX and PHP (two articles)-PHP Tutorial-php.cn

Submitting JQuery Mobile forms through AJAX and PHP (two articles)

PHP中文网

Release： 2016-08-08 09:31:26

Original

1371 people have browsed it

Submit jQuery Mobile forms via AJAX and PHP

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

jQuery mobile form submission

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

Recently, I was developing a mobile page using jQuery mobile, and encountered a problem when submitting the form.

The background is processed by servlet. If you want to use the redirection in the servlet to jump to the page and forward it to the mobile phone, it will not work at all. An errorpage message will appear.

After consulting online information and the jQuery mobile API, I learned that jQuery mobile form submission defaults to ajax submission, so the page jump function will not be implemented at all if the page jump is written in the servlet.
So I added the attribute data-ajax="false" to the form according to the tutorial, and found that not only the page jump could not be performed, but also the background database operations could not be performed, and a 500 error was reported.

I have thought for a long time that since I use ajax to submit, I will use ajax to jump the page

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

Copy after login

<!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>

Copy after login

Note that the data in js

<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");  
                      }  
                });  
            });  
  
        });

Copy after login

is necessary, otherwise the data accepted by requset.getParameter in the servlet will be null, ajax and After successful interaction in the background, use changePage to jump to the page displayed after success.

The above introduces how to submit JQuery Mobile forms through AJAX and PHP (two articles), including relevant content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!