通过AJAX和PHP，提交JQuery Mobile表单

最新推荐文章于 2021-03-27 06:48:47 发布

BesturnLee

最新推荐文章于 2021-03-27 06:48:47 发布

阅读量4.5k

点赞数

分类专栏： JQuery Mobile 技术 JQuery 技术

本文链接：https://blog.csdn.net/besturnlee/article/details/8558807

版权

JQuery Mobile 技术同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JQuery 技术

3 篇文章 0 订阅

订阅专栏

File name: callajax.php

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

File name: 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>