如何将javascript与表单和json一起使用，然后输出json数据？

我是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>

原始名称：

新名称：

var雇员=[
{“firstName”：“John”，“lastName”：“Doe”}，
{“姓氏”：“安娜”，“姓氏”：“史密斯”}，
{“姓氏”：“彼得”，“姓氏”：“琼斯”}，]；
document.getElementById（“origname”）.innerHTML=employees[0]。firstName+“”+employees[0]。lastName；
//设置新名称
员工[0]。firstName=“吉尔伯特”；
document.getElementById（“newname”）.innerHTML=employees[0]。firstName+“”+employees[0]。lastName；

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

我想知道是否有人能帮我一把

以上是我想要的。。。 编辑

这是我在收到所有好人的回复后得到的，脚本对我来说很有意义，但不知何故它仍然不起作用：(

$（“#我的按钮”）。单击（函数（）{
var data=$（“#myInput”）.val（）；
$（“#myOutput”）.val（数据）；
});

---

出乎意料的补充问题。 假设现在我的代码是

jquery能够更改代码吗？ 比方说，如果我以某种方式键入红色，那么代码将是

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

---

诸如此类……

如果使用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>

$（“#我的按钮”）。单击（函数（）{
var data=$（“#myInput”）.val（）；
$（“#myOutput”）.val（数据）；
});

另外，看看，当一个页面中有很多类似于您的情况时，您可以更轻松地完成这些事情

如果你使用击倒

<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>

函数AppViewModel（）{
此数据=可观察的ko（“”）；
}
应用绑定（新的AppViewModel（））；

您可以通过

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

函数changeName（）{
document.getElementById（'newname'）。innerHTML=document.getElementById（'name2'）。值；
}  

根据您提供的图片，我将使用AJAX进行数据提交，然后使用jQuery更新/反映页面上的

（#3在您的图片中）

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

使用AJAX处理表单：

然后在AJAX完成后，使用

success

功能更新页面上的

：

但是，如果您实际上不需要处理数据…那么只需使用JQUERY来处理所有数据！普通表单，然后在单击submit时使用下面的命令用数据更新DIV

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

$（“#提交”）。单击（函数（）{
var输出=$（“#新名称”）.val（）；
$（“#输出”）.text（输出）；
});

更新

谢谢你发布代码。我在这里修改了一个有效的解决方案

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

 <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>

$（“#我的按钮”）。单击（函数（）{
var data=$（“#myInput”）.val（）；
//$（“#myOutput”）.val（数据）；这应该是.text而不是.val
$（“#myOutput”）.text（数据）；
});

---

让我知道它是如何工作的。别忘了把它标记为答案（如果它工作的话）对于未来的用户。谢谢！

这很有意义，但我不知道为什么它没有运行。我做了

，所以jquery应该正常运行，不是吗？我几乎复制并粘贴了mecek的回复，因为他的回复与您的回复相同，然后我在

之前添加了

输入和

等等w它没有运行听起来你做得很好，我会用Firebug来查看当你点击提交按钮时发生的错误。它会告诉你确切的错误是什么…然后我们可以从那里开始！让我编辑并发布我目前拥有的任何代码，我确实有Firebug，但我不确定如何使用你刚才说的函数“单击“提交”按钮，它将显示确切的错误”我似乎没有看到错误，或者我不知道在Firebug中的何处可以找到：（对不起，我更新了我的答案以反映更改，请参见上文。让我知道它是如何工作的！工作非常完美！该死>。

 <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>