Senden von JQuery Mobile-Formularen über AJAX und PHP (zwei Artikel)-PHP-Tutorial-php.cn

Senden von JQuery Mobile-Formularen über AJAX und PHP (zwei Artikel)

PHP中文网

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

Original

1380 Leute haben es durchsucht

JQuery Mobile-Formular über AJAX und PHP senden

Dateiname: callajax.php

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

Nach dem Login kopieren

Dateiname: index.php

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

Nach dem Login kopieren

jQuery-Mobile-Formularübermittlung

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

Kürzlich habe ich mit jQuery Mobile eine mobile Seite entwickelt und bin beim Absenden des Formulars auf ein Problem gestoßen.

Der Hintergrund wird vom Servlet verarbeitet. Wenn Sie die Umleitung im Servlet verwenden möchten, um die Seite zu überspringen und an das Mobiltelefon weiterzuleiten, wird eine Fehlermeldung angezeigt.

Nachdem ich Online-Informationen und die mobile jQuery-API konsultiert hatte, erfuhr ich, dass die Übermittlung mobiler jQuery-Formulare standardmäßig die Ajax-Übermittlung verwendet, sodass die Seitensprungfunktion überhaupt nicht implementiert wird, wenn der Seitensprung in das Servlet geschrieben wird.

Also folgte ich dem Tutorial und fügte dem Formular das Attribut data-ajax="false" hinzu. Dabei stellte ich fest, dass nicht nur der Seitensprung nicht funktionierte, sondern auch die Hintergrundoperationen der Datenbank nicht funktionierten und ein 500-Fehler gemeldet wurde.

Nachdem ich lange darüber nachgedacht habe, werde ich Ajax zum Überspringen der Seite verwenden

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

Nach dem Login kopieren

<form method="post" id="feedbackform">  
t;span style="white-space:pre">              </span>//相关表单元素  
    <input type="button" id="submitbtn" value="提交">  
</form>

Nach dem Login kopieren

Beachten Sie, dass die Daten in js

$(&#39;#feedbackform&#39;).serialize()

Nach dem Login kopieren

sind ist ein Muss. Andernfalls sind die mit requset.getParameter im Servlet empfangenen Daten null. Nachdem Ajax erfolgreich mit dem Hintergrund interagiert hat, springen Sie mit changePage zu der Seite, die nach Erfolg angezeigt wird.

Das Obige stellt die Übermittlung von JQuery Mobile-Formularen über AJAX und PHP vor (zwei Artikel), einschließlich relevanter Inhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!