JQuery 初学者

Question

以下是我的表格

<form id="form1">
    <table>
        <tr><td >Name:</td><td class="CommentsRight"><input type="text" name="txtName" style="width:90%" /></td></tr>
        <tr><td >Email: (Optional)</td><td class="CommentsRight"><input type="text" Name="txtEmail" style="width:90%" /></td></tr>
        <tr><td >Comment: </td><td class="CommentsRight"><textarea type="text" style="width:90%" Name="txtMessage" TextMode="MultiLine" Rows="10"></textarea></td></tr>
        <tr><td ></td><td class="CommentsRight"><input type="submit" width="100" ID="cmdSubmit" onclick="javascript: SubmitComment();" />&nbsp;&nbsp;&nbsp;<input type="button" ID="cmdCancel" Text="Reset" value="Reset" onclick="document.getElementById('form1').reset();" /></td></tr>
    </table>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

function SubmitComment()
{
    alert($("txtName").val());

    $.ajax({
        type: "POST",
        url: "@(Request.RawUrl)",
        data: '{txtCode: "' + $("#txtName.value") + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () { alert('success'); } ,
        failure: function (response) {
            alert(response.d);
        }
    });
}

警报始终返回未定义的警报，我是 Ajax/Jquery 的初学者。 我已经尝试过#txtName，我也尝试过输入，但它没有返回我放入 txtName 中的任何值，我做错了什么。 然后我想扩展数据，以便将所有输入字符串传递到数据中。

简而言之，

1. 如何获取txtName.text的值
2. 如何构建数据字符串，使其包含分隔的数据值

非常感谢您的帮助。

Answer 1

尝试以下操作：

<input type="text" name="txtName" style="width:90%" />

进入

<input type="text" name="txtName" id="txtName" style="width:90%" />

---

javascript: SubmitComment();

进入

javascript: SubmitComment(e);

---

function SubmitComment()
{

进入

function SubmitComment(e)
{
    e.preventDefault();

---

alert($("txtName").val());

进入

alert($("#txtName").val());

---

data: '{txtCode: "' + $("#txtName.value") + '" }',

进入

data: {txtCode: $("#txtName").val() }, // Send particular data
(or)
data: $("#form1").serialize(), // Send inside form all data

Answer 2

您不能像您那样使用 $("txtName") 。 jQuery 将不知道选择什么。没有类/id 或任何其他选择器。而是使用

$("input[name=txtName]").val()

或给 txtName 一个类或 id（就像我在下面的示例中所做的那样）。

如果您现在想以漂亮的 Json 格式发送表单，您需要将其序列化：

var data = $("#form1").serialize();

https://jsfiddle.net/gahapv4t/

Answer 3

您在ajax请求的数据参数中编写了错误的代码。您可以传递参数对象，然后 jQuery 负责将其转换为原始 POST 数据或查询字符串。

function SubmitComment()
{
    alert($("txtName").val());

    $.ajax({
        type: "POST",
        url: "@(Request.RawUrl)",
        data: {txtCode: $("#txtName").val()},
        dataType: "json",
        success: function (data) { alert('success'); alert(JSON.stringify(data)) } ,
        failure: function (response) {
            alert(response.d);
        }
    });

Answer 4

你可以通过多种方式做到这一点。根据您的标记，您可以尝试通过以下方式获取 txtName 的值

$("input[name=txtName]").val();

或者您可以通过以下方式在输入字段中添加 id

<input name="txtName" id="someid">

最后要使用以下代码来获取值

$("#someid").val()

Answer 5

$("input[name=txtName]").val()

是通过名称获取值。

$("#id").val()

就是通过它的id来获取值。

$(".class").val()

就是通过类名获取值。

Answer 6

我想你已经知道第一个问题的答案了。

使用

$("#txtName').val()

接收字段的值，

您可以通过多种方式实现第二个问题：

1. 使用

   .serialize()

   功能

就像 Marcel 所写的那样，您可以创建一个变量数据，在其中序列化表单并将其传递给 $.ajax 函数，如下所示：

var data = $("#form1").serialize();
$.ajax({
    type: "POST",
    url: "@(Request.RawUrl)",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function () { alert('success'); } ,
    failure: function (response) {
        alert(response.d);
    }
});

2。使用 FormData 对象

更新拦截表单提交事件的函数，创建 FormData 对象并传递表单，如下所示：

$("#form1").submit(function(e){
    e.preventDefault();
    var formdata = new FormData($(this)[0]);
    $.ajax({
       type: "POST",
       url: "@(Request.RawUrl)",
       data: formdata,
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function () { alert('success'); } ,
          failure: function (response) {
             alert(response.d);
          }
    });

});

通过此方法，您还可以插入自定义数据来传递：

formData.append('action', 'customAction');
formData.append('id', 123);
formData.append('mydogname', 'Jo');

3.使用 post() 函数

这是使用 Ajax 发送发布数据的最简单方法之一（文档）。自定义和使用 Jquery 逻辑也很容易。

$( "#form1" ).submit(function( event ) {
  event.preventDefault();
  var $form = $( this ),
    data = $form.serialize();
  var posting = $.post( "@(Request.RawUrl)", data );
  posting.done(function( data ) {
     alert(data);
  });
});

希望这对您有帮助。