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

Home

Backend Development

PHP Tutorial

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

PHP中文网

Aug 08, 2016 am 09:31 AM

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);  
?>

<!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 id="Call-nbsp-Ajax">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 id="GiantFlyingSaucer">GiantFlyingSaucer</h1>  
        </div>  
    </div>  
</body>  
</html>

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

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PM

The article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.

What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PM

The article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.

How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PM

Article discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.

What is autoloading in PHP?Apr 30, 2025 pm 03:37 PM

Autoloading in PHP automatically loads class files when needed, improving performance by reducing memory use and enhancing code organization. Best practices include using PSR-4 and organizing code effectively.

What are PHP streams?Apr 30, 2025 pm 03:36 PM

PHP streams unify handling of resources like files, network sockets, and compression formats via a consistent API, abstracting complexity and enhancing code flexibility and efficiency.

What is the maximum size of a file that can be uploaded using PHP ?Apr 30, 2025 pm 03:35 PM

The article discusses managing file upload sizes in PHP, focusing on the default limit of 2MB and how to increase it by modifying php.ini settings.

What is Nullable types in PHP ?Apr 30, 2025 pm 03:34 PM

The article discusses nullable types in PHP, introduced in PHP 7.1, allowing variables or parameters to be either a specified type or null. It highlights benefits like improved readability, type safety, and explicit intent, and explains how to declar

What is the difference between the unset() and unlink() functions ?Apr 30, 2025 pm 03:33 PM

The article discusses the differences between unset() and unlink() functions in programming, focusing on their purposes and use cases. Unset() removes variables from memory, while unlink() deletes files from the filesystem. Both are crucial for effec

See all articles