javascript-在jqueryMobile HTML页面中使用jquery提交时刷新部分标签

我正在使用Dreamweaver6.0中的jquerymobile模板并构建移动应用程序界面.在主屏幕上,我有四个按钮-例如,查看,创建,更新,删除.
当我单击“创建”时,它将打开一个新屏幕(从这四个按钮打开的每个屏幕都被定义为同一index.html页中的“部分”).

在创建“节”中,几乎没有表单字段和提交按钮.当我单击提交时,我的表单值将被提交到数据库(我正在使用AJAX来做到这一点).但是这里的问题是,当我单击“提交”时,我的页面无法刷新.

我正在寻找的是,一旦单击“提交”,“创建部分”应该刷新,并且同一index.html页面的“视图”部分中存在的下拉列表也应该刷新(该部分新输入的详细信息为drop -down元素,从数据库动态更新.)

HTML代码：

<section data-role="page" id="home" data-theme="b">
  <header data-role="header" data-theme="a">
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content"> <a href="#view">
    <input value="View" type="button" data-role="button" data-icon="info">
    </a> <a href="#create">
    <input value="New" type="submit" data-role="button" data-icon="plus">
    </a> <a href="#updatePage">
    <input value="Update" type="submit" data-role="button" data-icon="refresh">
    </a> <a href="#deletePage">
    <input value="Delete" type="submit" data-role="button" data-icon="minus">
    </a> </div>    

  <footer data-role="footer" class="ui-footer-fixed">
    <h5>Cnonymn</h5>
  </footer>
</section>

<section data-role="page" id="view" data-theme="b">
  <header data-role="header"> <a href="#home" class="ui-btn-left  ui-btn-hover-c"> Back </a>
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content">
    <form>
      <div data-role="fieldcontain">
        <label for="names">Select Employee</label>
         <select name='names' id='names' size='1' onchange="getDetails(this)">
         <option>Select</option>
        </select>               
      </div>
      <div data-role="fieldcontain">
        <input value="Show All" data-role="button" onClick = "getAllDetails()" type="button">
      </div>
    </form>
    <div id="emp_tb1" align="center" data-theme="b">Here are the details </div>
  </div>
  <footer data-role="footer" class="ui-footer-fixed">
    <h4>Cnonymn</h4>
  </footer>
</section>

<section data-role="page" id="create" data-theme="b">
  <header data-role="header"> <a href="#home" class="ui-btn-left  ui-btn-hover-c" onClick=""> Back </a>
    <h1>CRUD Experiment</h1>
  </header>
  <div data-role="content">
    <form method="post" id="myForm">
      <label for="emp_name">Name</label>
      <input name="empName" id="emp_name" value="" type="text" data-theme="a">
      <label for="emp_dob">Date</label>
      <input name="empDOB" id="emp_dob" value=""  data-theme="a">
      <label for="emp_gender">Gender</label>
      <select name="empGender" id="emp_gender" data-role="slider" data-theme="a" data-inline="true" style="display:none;">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      <label for="address">Address</label>
      <textarea name="empAddr" id="e_address" value="" type="text" data-theme="a"></textarea>
      <br>
      <br>
      <label for="image">Add Image</label>
      <input name="image" id="image" value="" type="file" data-theme="a">
      <br>
      <br>
      <label for="multimedia">Add Multimedia</label>
      <input name="multimedia" id="multimedia" value="" type="file" data-theme="a">      
      <br>
      <br>
      <input type="submit" id="insert" value="Submit">
    </form>
  </div>
  <div id="someElement"></div>
  <footer data-role="footer" class="ui-footer-fixed">
    <h4>Cnonymn</h4>
  </footer>
</section>

我应该在什么地方编写刷新功能？此刷新应同时“刷新表单屏幕”和“更新下拉列表”

解决方法:

可以刷新(刷新)表单,而不是刷新整个页面(这将花费更长的时间).

在表单中添加ID,然后在ajax成功提交后,可以重置这些表单.

这是演示http://jsfiddle.net/yeyene/SjbMd/5/

JQUERY

$(document).ready(function(){
    $('#btn_submit').on('vclick', function(){
        event.preventDefault();

        $(".ui-loader").show(); 
        $.ajax({
            type: 'POST',
            url: 'url',
            data: 'data',
            dataType: "json",
            success: function(data) {
                alert('Form successfully submitted!');
                $("#viewForm")[0].reset();
                $("#myForm")[0].reset();
                $(".ui-loader").hide();
            }
        });
    });
});  

标签：html5,ajax,jquery-mobile,javascript,jquery
来源： https://codeday.me/bug/20191123/2065654.html