suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Senden von JQuery Mobile-Formularen über AJAX und PHP (zwei Artikel)

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

PHP中文网
PHP中文网Original
2016-08-08 09:31:261372Durchsuche

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

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>










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

Beachten Sie, dass die Daten in js 

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

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：2015.1 Wissenspunkte und Funktionen, die beim Schreiben von Message Boards verwendet werden ---> ZusammenfassungNächster Artikel：2015.1 Wissenspunkte und Funktionen, die beim Schreiben von Message Boards verwendet werden ---> Zusammenfassung

In Verbindung stehende Artikel

Mehr sehen