带有jQuery的CGI后表单未完全加载

CGI post form with jQuery not fully loaded

本文关键字：加载 表单 jQuery CGI 带有      更新时间：2023-10-16

我正在尝试编写一个C++CGI程序，该程序可以用多个页面提供jQuery Mobile响应。然而，似乎只处理响应中的第一个(已经尝试了多个浏览器(。

为了简化，我用一个简单的表单创建了以下HTML页面，使用Post调用CGI程序：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="login">
  <div data-role="header">
    <h1>Login</h1>
  </div>
  <div data-role="main" class="ui-content">    
    <form method="post" action="/cgi-bin/testForm">
      <center>
        <input type="submit" data-inline="true" value="Login">
      </center>
    </form>
  </div>
  <div data-role="footer">
  </div>
</div>
</body>
</html>

testForm的C++代码是：

#include <cstdio>
int main(int argc,char**argv,char**environ) {
   printf("Content-type: text/html; charset=utf-8nn");
   printf("<html>n");
   printf("<head>n");
   printf("<meta name="viewport" content="width=device-width, initial-scale=1">n");
   printf("<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">n");
   printf("<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>n");
   printf("<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>n");
   printf("</head>nn");
   printf("<body>nn");
   printf("<div data-role="page" id="page1">n");
   printf("  <div data-role="header">n");
   printf("    <h1>Page1</h1>n");
   printf("  </div>n");
   printf("  <div data-role="main" class="ui-content">n");
   printf("    <p>text</p>n");
   printf("  </div>n");
   printf("  <div data-role="footer">n");
   printf("    <div data-role="navbar">n");
   printf("      <ul>n");
   printf("        <li><a href="#page1">Page1</a></li>n");
   printf("        <li><a href="#page2">Page2</a></li>n");
   printf("      </ul>n");
   printf("    </div>n");
   printf("  </div>n");
   printf("</div>nn");
   printf("<div data-role="page" id="page2">n");
   printf("  <div data-role="header">n");
   printf("    <h1>Page2</h1>n");
   printf("  </div>n");
   printf("  <div data-role="main" class="ui-content">n");
   printf("    <p>text</p>n");
   printf("  </div>n");
   printf("  <div data-role="footer">n");
   printf("    <div data-role="navbar">n");
   printf("      <ul>n");
   printf("        <li><a href="#page1">Page1</a></li>n");
   printf("        <li><a href="#page2">Page2</a></li>n");
   printf("      </ul>n");
   printf("    </div>n");
   printf("  </div>n");
   printf("</div>nn");
   printf("</body>n");
   printf("</html>n");
   return 0;
}

当我通过"Post"表单运行此操作时，我无法导航到page2，Safari中的"view source"表示只处理了第一个页面的div。

有趣的是，如果我点击重载，它会使用"get"加载表单，并且两个页面都被正确加载。

使用"post"的CGI程序在正确处理多个页面方面是否存在一些限制？

这与CGI或POST请求无关
这是jQuery在做的。

如果你打开你的HTML页面，打开开发工具，转到网络选项卡(在Safari:时间线>网络请求中(，然后点击"登录"按钮，很明显，jQuery将表单提交转换为XHR，将响应集成回当前页面，并以某种方式破解浏览器栏中显示的URL
之后，页面上的所有#-链接似乎都被破坏了，从而也破坏了jQuery的页面导航，而jQuery依赖于这些链接。

现在，我不知道为什么会发生这种情况，但有一种解决方法：

告诉jQuery不要将表单提交转换为XHR
您可以通过将data-ajax="false"添加到<form>标记中来完成此操作。

相关文章：