【问题标题】：how to use javascript with form and json then output json data?如何使用带有表单和json的javascript然后输出json数据？
【发布时间】：2013-11-17 04:19:17
【问题描述】：

我是 javascript 的新手，所以希望我想要的能奏效。我查看了一些论坛和教程，其中大多数只教诸如

之类的东西

<p>Original name: <span id="origname"></span></p>
<p>New name: <span id="newname"></span></p>

<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" }, 
{ "firstName" : "Anna" , "lastName" : "Smith" }, 
{ "firstName" : "Peter" , "lastName" : "Jones" }, ];

document.getElementById("origname").innerHTML=employees[0].firstName + " " + employees[0].lastName;

// Set new name
employees[0].firstName="Gilbert";
document.getElementById("newname").innerHTML=employees[0].firstName + " " + employees[0].lastName;
</script>

这很容易理解，但我只想做一些简单的事情，比如输入一个文本字段然后提交，在底部的同一页面内将显示正在输入的任何文本。

我想知道是否有人可以帮我解决这个问题。

以上就是我想要的...

已编辑

这是我在得到所有好人的回复后目前所拥有的，脚本对我来说很有意义，但不知何故它仍然无法正常工作:(

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title></title>
  <script src="jquery-1.9.1.min.js"></script>



</head>
<body>

<form action=" " method="post">
<input id="myInput" type="text"/>
<input id="myButton" type="button" value="submit"/>
<p id="myOutput"></p>
</form>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

</body>

突然出现的其他问题。假设现在我的代码是

<p id="myOutput" style="color: yellow; background: black; width: 100px;"></p>

jquery 可以更改代码吗？假设我以某种方式输入红色，那么代码将是

<p id="myOutput" style="color: red; background: black; width: 100px;"></p>

如果我有另一个输入文本区域并输入 200，那么代码将是

<p id="myOutput" style="color: yellow; background: black; width: 200px;"></p> 类似的东西....

【问题讨论】：

标签： javascript json forms input submit

【解决方案1】：

根据您提供的图片，我将使用 AJAX 进行数据提交，然后使用 jQuery 更新/反映页面上的<div>（图片中的#3）。

您可能已经知道如何执行上述操作，但如果不知道，我发现这些教程在学习 AJAX 和使用 jQuery 更新 div 时非常有用：

使用 AJAX 处理表单：http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

然后在 AJAX 完成后使用 success 函数更新页面上的 <div>：http://api.jquery.com/jQuery.ajax/

但是，如果您实际上不需要处理数据……那么只需使用 JQUERY 来处理所有数据！正常形式，然后使用下面的数据更新DIV 提交的点击数据。

 <div id="output"></div>
 <script>
    $("#submit").click(function() {
         var output = $("#new_name").val();
    $("#output").text(output);
    });
 </script>

更新

感谢您发布代码。我在这里摆弄了一个可行的解决方案http://jsfiddle.net/hwGde/4/

下面是出现问题的行上带有注释的代码：

 <form action=" " method="post">
      <input id="myInput" type="text" />
      <input id="myButton" type="button" value="submit" />
      <p id="myOutput"></p>
 </form>

  <script> 
    $("#myButton").click(function () {
       var data = $("#myInput").val();
       // $("#myOutput").val(data); this should be .text instead of .val
       $("#myOutput").text(data);
    });
 </script>

让我知道这是如何工作的。并且不要忘记将其标记为未来用户的答案（如果有效）。谢谢！

【讨论】：

很好，这很有意义，但我不知道为什么它根本没有运行。我做了<script src="jquery-1.9.1.min.js"></script>，所以 jquery 应该可以正常运行，不是吗？我几乎复制并粘贴了 mecek 的回复，因为他的回复与您的相同，然后我在输入中添加了<form action=" " method="post">，在<script> 之前添加了</form>，但不知何故它没有运行
听起来您已经正确完成了，我会使用 Firebug 查看您单击提交按钮时出现的错误。它会告诉你确切的错误是什么......然后我们可以从那里开始！
让我编辑并发布我目前拥有的任何代码，我确实有 firebug，但我不确定如何使用您刚才所说的功能“单击提交按钮，它会显示确切的错误“我似乎没有看到错误，或者我不知道在萤火虫的哪里可以找到:(对不起
我更新了我的答案以反映更改，见上文。让我知道它是如何工作的！
完美运行！该死的 >.

【解决方案2】：

你可以这样做，

<input type="text" id="name2" onclick="changeName()" />  
<script>  
function changeName(){  
    document.getElementById('newname').innerHTML=document.getElementById('name2').value;  
}  
</script>

【讨论】：

【解决方案3】：

如果你用jquery写少做多，

<input id="myInput" type="text"/>
<input id="myButton" type="button"/>
<p id="myOutput"></p>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

另外看看knockout，当页面中有很多像你这样的情况时，你可以更轻松地做这些事情。

如果你使用淘汰赛

<input type="text" data-bind="value:data"></input>
<p data-bind="text:data"></p>

<script>
function AppViewModel() {
    this.data= ko.observable("");
}

ko.applyBindings(new AppViewModel());
</script>

【讨论】：