Question

这是表格

<form method="post">

    <input type="hidden" name="resulttype" value="Create">              
    <table>
        <tr>
            <td>Name</td>           
            <td><input type="text" id="name" value="Abhishek"/></td>
        </tr>
        <tr>
            <td>User Name</td>
            <td><input type="text" id="username" name="username" value="AbhishekSimion"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" id="email" name="email" value="a@a.com"></td>
        </tr>
        <tr>
            <td>Department</td>
            <td><input type="text" id="department" name="department"></td>
        </tr>
        <tr><td colspan="2"><input type="button" id="button" value="Done!"></td></tr>
    </table>
</form>

这是Javascript部分

var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;
$(function() {
$("#button").click(function() {
    callme();
    });
  });
function callme()
{
    alert(dataString);
    var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: dataString,
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

}

为什么我的警报框中会收到“ name = null＆amp; email = undefined ”的消息？这有什么不对？

注意：我使用的是JQuery v1.5.2

Answer 1

~~至少email值应该有效......~~

在任何情况下，请勿手动创建字符串。将data设置为包含值的对象：

data: {name: $('#name').val(), email: $('#email').val()},
// or
data: $('#yourformID').serialize(),

这样，jQuery将负责正确的转义。

另请注意，ID必须是唯一的。如果页面上的其他元素具有相同的ID，则无法使用。然后更改ID。

<强>更新

您的代码流程不正确。这部分：

var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;

将在页面加载之前执行。这意味着（a）元素尚未可用，（b）即使它们是，用户也无法输入任何信息。

您必须在要发送表单时阅读值：

$(function() { $("#button").click(callme); function callme() { $.ajax({ type: "POST", url: "/temp/AjaxPostSend", data: {name: $('#name').val(), email: $('#email').val()}, success: function(msg){ alert( "Data Saved: " + msg ); } }); } });

另请注意

var msg = $.ajax({...}).responseText;

不起作用，因为Ajax请求是异步。这意味着在Ajax响应可用之前，callme()将返回。响应文本可用作success回调的参数。

更正：我看到了async: false，但似乎我脑子里有点误差;）在这种情况下，上述说法确实有效。但是你应该避免同步Ajax（应该被称为Sjax）调用它阻止客户端。

Answer 2

试试这个

var myname = $('#name').val()
var mymail = $('#email').val();

DEMO

你也可以使用如下

数据：{name：myname，email：mymail}

var msg = $.ajax({
        type: "POST",      
        url: "/temp/AjaxPostSend",
        data: { name: myname, email: mymail }
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

更新

尝试

<input type="text" id="myname" name="myname" value="Abhishek"/>然后是 var myname = $('#myname').val()

通过POST使用发送日期

 data: $('#yourformID').serialize(),

Answer 3

要使用纯JavaScript获取输入的值，您必须访问名为value的变量。

var x = document.getElementById("name").value;

你的第二个变量应该按预期工作，但是可以省略选择器的输入，因为ID总是唯一的，它可以节省几个字节。

var email = $("#email").val();

此外，还有一种更简单的方法来发送带有ajax的表单。序列化表单。请注意data: ...

var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: $("form").serialize(),
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

Answer 4

变化

var x = document.getElementById("name");
var email = $("input#email").val();

到

var x = $("#name");
var email = $("#email").val();

另外，这部分：

var x = $("#name");
var email = $("#email").val();  
var dataString = 'name='+ x + '&email=' + email;

需要在callme（）函数调用之前进行，如下所示：

var dataString;
$(function() {
$("#button").click(function() {
    var x = $("#name");
    var email = $("#email").val();  
    dataString = 'name='+ x + '&email=' + email;
    callme();
    });
  });

Answer 5

由于，

'x'中的值是一个对象而不是一个字符串，我认为'$（“input＃email”）'的语法是错误的。试试$(":input[id='email']").val()

Answer 6

不确定为什么电子邮件会为您提供未定义的值，但是对于名称，它应该如下所示：

var x = document.getElementById("name").value;

OR

var x = $('#name').val();

使用jquery和DOM访问表单元素

6 个答案:

DEMO