Question

我创建了一个HTML代码来构建一个用户表单，其中包含人们在文本中写入的信息。此页面还有一个按钮，应该获取所有输入的信息并将其转换为json文件。

我以前从未这样做过，所以我不知道怎么做到这一点。据我所知，我知道我需要一个本地服务器来发送html代码，以便它可以返回json，但是这个过程对我来说绝对不清楚。

我在html中的代码是这样的：

<!DOCTYPE html>
<html>
 <header>
   <h1>My Promo</h1>
   <h2>Get insights out of an endless see of data...</h2>
   <link rel="stylesheet" href="mycss.css">
 </header>

 <form action="http://localhost/" method="post">

  <!-- Input label -->
  <div class="formgroup" id="name-form">
    <label for="name">What is your banner?*</label>
    <input type="text" name="banner" />
  </div>

  <!-- Input label -->
  <div class="formgroup" id="name-form">
    <label for="name">Name of current promo*</label>
    <p>(write a short name, e.g: "DPE17")</p>
    <input type="text" name="CurrentPromo" />
  </div>

  <div class="submit">
    <input type="submit" value="Get my data" />
  </div>

 </form>
</html>

然后，当我点击按钮＆＃34;获取我的数据＆＃34;它什么都不做。

你能告诉我从中获取json的过程吗？

非常感谢！

Answer 1

由于您没有提及任何特定的JSON结构，我认为下面的代码对您有用。您必须根据自己的需要进行自定义。

我会建议您查找和检查不同的JavaScript库，看看哪种适合您的客户端应用程序。（jQuery最容易学习）

同时检查它是否是REST服务器。基于此决定您的客户端javascript框架。（Angular是基于REST的应用程序的不错选择）

＆＃13;

function onSubmitForm( myForm ){
  var formjson = JSON.stringify( $(myForm).serializeArray() ); //  <-----------

  console.log( formjson );
  return false; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<header>
    <h1>My Promo</h1>
    <h2>Get insights out of an endless see of data...</h2>
    <link rel="stylesheet" href="mycss.css">
</header>

<form action="http://localhost/" method="post" class="myform" onsubmit='return onSubmitForm(this)'>

<!-- Input label -->
<div class="formgroup" id="name-form">
    <label for="name">What is your banner?*</label>
    <input type="text" name="banner" />
</div>

<!-- Input label -->
<div class="formgroup" id="name-form">
    <label for="name">Name of current promo*</label>
    <p>(write a short name, e.g: "DPE17")</p>
    <input type="text" name="CurrentPromo" />
</div>

<div class="submit">
    <input type="submit" value="Get my data" />
</div>

</form>
</html>

＆＃13;

从我的html页面返回一个json

1 个答案: