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

您不能在这样做时使用$("txtName")。jQuery将不知道该选择什么。没有类/id或任何其他选择器。相反，使用$("input[name=txtName]").val()或者给txtName一个类或id (就像我在下面的例子中所做的那样)。

如果您想现在将表单发送到一个漂亮的Json中，则需要序列化它：

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

https://jsfiddle.net/gahapv4t/

Answer 2

尝试以下几点：

<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 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);
        }
    });