查看: 4333|回复: 4

[技术交流] 为什么pagetwo上的表单提交后会自动跳转到pageone上,小白求大神解答

[复制链接]
发表于 2018-4-12 09:20:02 | 显示全部楼层 |阅读模式
  1. <html>
  2. <head>
  3.     <title>题库管理</title>
  4.     <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.css">
  5.     <link rel="stylesheet" href="../css/exam.css">
  6.     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  7.     <script src="../js/jquery.mobile-1.4.5.js"></script>
  8.     <script src="../js/ajaxfileupload.js"></script>
  9.     <script src="../js/exam.js"></script>
  10. </head>
  11. <body>
  12. <div data-role="page" id="pageone">
  13.     <div data-role="header">
  14.         <a href="newMain.jsp" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
  15.         <h1>欢迎来到我的主页</h1>
  16.         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-user ui-btn-icon-left">用户</a>
  17.         <div data-role="navbar">
  18.             <ul>
  19.                 <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li>
  20.                 <li><a href="#pagetwo" data-icon="arrow-r">题目管理</a></li>
  21.             </ul>
  22.         </div>
  23.     </div>

  24.     <div data-role="content">
  25.         <p>新增删除编辑题目类别</p>
  26.         <p>新增删除编辑题目科目</p>
  27.     </div>

  28.     <div data-role="footer">
  29.         <h1>我的页脚</h1>
  30.     </div>
  31. </div>

  32. <div data-role="page" id="pagetwo">
  33.     <div data-role="header">
  34.         <a href="newMain.jsp" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
  35.         <h1>欢迎来到我的主页</h1>
  36.         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-user ui-btn-icon-left">用户</a>
  37.         <div data-role="navbar">
  38.             <ul>
  39.                 <li><a href="#pageone" data-icon="home">首页</a></li>
  40.                 <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">题目管理</a></li>
  41.             </ul>
  42.         </div>
  43.     </div>

  44.     <div data-role="content">
  45.         <div>
  46.             <input id="file" type="file" name="uploadFile"/>
  47.             <input type="submit" id="submitFile" value="题目文件导入"/>
  48.         </div>

  49.         <div data-role="collapsible" data-collapsed="false" data-mini="true">
  50.             <h1>筛选项</h1>
  51.             <form id="filter" method="post">
  52.                 <fieldset data-role="controlgroup">
  53.                     <legend>请选择题目类型:</legend>
  54.                     <label for="single-choice">单选题</label>
  55.                     <input type="checkbox" name="type" id="single-choice" value="单选">
  56.                     <label for="multi-choice">多选题</label>
  57.                     <input type="checkbox" name="type" id="multi-choice" value="multi-choice">
  58.                     <label for="blank">填空题</label>
  59.                     <input type="checkbox" name="type" id="blank" value="blank">
  60.                     <label for="true-false">判断题</label>
  61.                     <input type="checkbox" name="type" id="true-false" value="true-false">
  62.                     <label for="essay">问答题</label>
  63.                     <input type="checkbox" name="type" id="essay" value="essay">
  64.                 </fieldset>
  65.                 <fieldset data-role="controlgroup">
  66.                     <legend>请选择题目科目:</legend>
  67.                     <label for="welding">焊接</label>
  68.                     <input type="radio" name="subject" id="welding" value="焊接">
  69.                     <label for="Painting">涂装</label>
  70.                     <input type="radio" name="subject" id="Painting" value="Painting">
  71.                 </fieldset>
  72.                 <input type="submit" id="submitFilter" data-inline="true" value="提交">
  73.                 <input type="reset" data-inline="true" value="重置">
  74.             </form>
  75.         </div>

  76.         <div>
  77.             <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="importTable">
  78.                 <thead>
  79.                 <tr>
  80.                     <th data-priority="4">题目ID</th>
  81.                     <th>题型</th>
  82.                     <th data-priority="1">科目类别</th>
  83.                     <th data-priority="2">题目内容</th>
  84.                     <th data-priority="3">题目选项</th>
  85.                 </tr>
  86.                 </thead>

  87.                 <tbody id="itbody"></tbody>
  88.             </table>
  89.         </div>
  90.     </div>

  91.     <div data-role="footer">
  92.         <h1>我的页脚</h1>
  93.     </div>
  94. </div>

  95. <script>
  96.     $("#submitFilter").on("tap", function () {
  97.         var data = arrayToJson($("#filter").serializeArray());
  98.         $.ajax({
  99.             url: "query",
  100.             type: "POST",
  101.             data: data,
  102.             dataType: 'text',
  103.             success: function (data) {
  104.                 str = "";
  105.                 var json = JSON.parse(data);
  106.                 if (json.code === 0) {
  107.                     var dt = json.data;
  108.                     $.each(dt, function (index, item) {
  109.                         console.log(item);
  110.                         str += "<tr>" +
  111.                             "<td>" + item.id + "</td>" +
  112.                             "<td>" + item.type + "</td>" +
  113.                             "<td>" + item.subject + "</td>" +
  114.                             "<td>" + item.content + "</td>"
  115.                             + "</tr>";
  116.                         item
  117.                     });
  118.                     $("#itbody").html(str);
  119.                 }
  120.             },
  121.             error: function () {
  122.                 alert("请求失败")
  123.             }
  124.         });
  125.     });
  126. </script>

  127. <script>
  128.     $("#submitFile").on("tap", function () {
  129.         $.ajaxFileUpload({
  130.             url: "import",
  131.             fileElementId: 'file',
  132.             secureurl: false,
  133.             dataType: 'text',
  134.             beforeSend: function () {

  135.             },
  136.             success: function (data) {
  137.                 alert("文件导入成功")
  138.             },
  139.             error: function () {
  140.                 alert("AJAX失败")
  141.             }
  142.         });
  143.     });
  144. </script>
  145. </body>
  146. </html>
复制代码
回复

使用道具 举报

发表于 2018-4-12 19:21:44 | 显示全部楼层
表单跳转没有处理!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表