Question

我有4-5个表单，我想在我的网站上为用户提供，作为使用其中一个的选项。

我想我会打开一个包含表单截图的页面，如果用户点击一个表格，则应使用ajax加载。

我可以将它重定向到表单但我只是想知道有没有办法用ajax jquery来做。

谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form Validate and Save</title> <link href="style.css" rel="stylesheet">  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">
     $( document ).ready(function() {
    $.ajaxSetup({ cache: false });   });
     window.onload = initPage;
     function initPage() {
     $.getJSON('formData.json', function(Data) {

      $("#formName").html( Data.load[0].formName ).html();
      $("#fname").html( Data.load[0].fname ).html();
      $("#fmail").html( Data.load[0].fmail ).html();
      $("#fmobile").html( Data.load[0].fmobile ).html();
      $("#fmessage").html( Data.load[0].fmessage ).html();
      $("#mailTo").val( Data.load[0].mailTo );
     });   }
     function sendData() {
    var newformName = document.getElementById('formName').innerHTML;
    var newfname = document.getElementById('fname').innerHTML;
    var newfmail = document.getElementById('fmail').innerHTML;
    var newfmobile = document.getElementById('fmobile').innerHTML;
    var newfmesage = document.getElementById('fmessage').innerHTML;
    var newmailTo = document.getElementById('mailTo').value;

    var newData = {
     formName: newformName, fname: newfname, fmail: newfmail, fmobile: newfmobile, fmessage: newfmesage, mailTo: newmailTo, file:

'formLoad.json', 
    };

    $.ajax({
      type: 'POST',
      url: 'save.php',
      data: newData,
    }).done(function( formData ) {
      formData = eval('(' + formData + ')');
      $('#formName').html( formData.load[0].formName ).html();
      $('#fname').html( formData.load[0].fname ).html();
      $('#fmail').html( formData.load[0].fmail ).html();
      $('#fmobile').html( formData.load[0].fmobile ).html();
      $('#fmessage').html( formData.load[0].fmessage ).html();
      $('#mailTo').val( formData.load[0].mailTo );
    });   } </script>  </head>   <body>

   <?php
    require_once('login.php');
    ?>
    <?php require_once('formLoad.php'); ?>

 <!-- JavaScript below! -->

<!-- jQuery via Google + local fallback, see h5bp.com -->     <script src="assets/js/jquery-1.7.1.min.js"></script>

<!-- Bootstrap JS -->     <script src="assets/js/bootstrap.js"></script>

<!-- Validate plugin -->        <script src="assets/js/jquery.validate.min.js"></script>

<!-- Scripts specific to this page -->      <script src="script.js"></script>

    <!--    <script>            // Activate Google Prettify in this page
                addEventListener('load', prettyPrint, false);

            $(document).ready(function(){

                // Add prettyprint class to pre elements
                    $('pre').addClass('prettyprint linenums');

            });

        </script>-->

  </body> </html>

Answer 1

这是一个相当广泛的问题，但我会尽力回答。

以下方法使您可以将所有表单放在一个.html文件中，并为它们提供不同的ID。（说#form1, #form2, #formN。）如果用户选择了一个，你应该找出正确的ID，然后执行：

$('#elementYouWantTheLoadedFormIn').load('ajax/fileWithTheForms.html #' + formID, function() {
    // Optional callback.
});

选择一个Web表单并加载它

1 个答案: