gpt4 book ai didi

javascript - 如何使用带有表单和json的javascript然后输出json数据?

转载 作者:行者123 更新时间:2023-11-30 12:54:17 27 4
gpt4 key购买 nike

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

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

我想知道是否有人可以帮助我解决这个问题。 enter image description here

以上就是我想要的...

已编辑

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

<!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>类似的东西....

最佳答案

根据您提供的图片,我会使用 AJAX 进行数据提交,然后使用 jQuery 更新/反射(reflect) <div> 来解决这个问题在页面上(你的照片中的#3)。

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

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

然后更新 <div>在您的页面上使用 success AJAX 完成时的功能:http://api.jquery.com/jQuery.ajax/

但是,如果您实际上不需要处理数据...那么只需使用 JQUERY 来处理所有数据!正常形式,然后使用下面使用提交的数据 onclick 更新 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>

让我知道这是如何工作的。并且不要忘记将其标记为 future 用户的答案(如果有效)。谢谢!

关于javascript - 如何使用带有表单和json的javascript然后输出json数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19803441/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com