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的任何值，我做错了什么。我想扩展数据，所以我将所有输入字符串传递给数据。

简而言之，

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

非常感谢你的帮助。

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不知道要选择什么。没有class / id或任何其他选择器。而是使用$("input[name=txtName]").val()或给txtName一个类或id（就像我在下面的例子中所做的那样）。

如果你想在一个漂亮的Json中发送表单，你需要序列化它：

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

https://jsfiddle.net/gahapv4t/

Answer 3

你在ajax请求的数据参数中写错了代码。你可以传递paramater的对象，然后jQuery会把它转换成Raw 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()来接收字段的值

您可以通过多种方式解决第二个问题：

使用.serialize()功能

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（Documentation）发送帖子数据的最简单方法之一。它也很容易定制和使用Jquery Logics。

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

我希望这会对你有所帮助。

初学者到JQuery

6 个答案: