Question

我正在使用JQuery 3.2.1来获取输入表单。问题是我没有得到任何东西，空对象或空字符串。我尝试使用序列化，序列化数组，来自SO的代码来获取字段并转换为json，没有任何工作。

我确信我正确地写了表单id，因为函数的订阅是成功的。

这里是html的一部分：

<form role="form" id="organisationform">
    <div class="row col-sm-offset-1">
        <div class="form-group col-sm-5">
            <label for="name" class="h4">Nom Organisation</label>
            <input type="text" class="form-control" id="nomOrg" placeholder="Nom de l'organisation" required>
        </div>
        <div class="form-group col-sm-5">
            <label for="lastname" class="h4">Identificateur </label>
            <input type="text" class="form-control" id="idOrg" placeholder="Entrer IDentificateur" required>
        </div>
    </div>
...
</form>

这里是js代码：

onSubmit('form#organisationform', function() {
    send('http://localhost:8080/organisation/ajouter', 'form#organisationform');
});

在另一个档案中：

function grabForm(formId) {
var data = {};
 $(this).serializeArray().map(function(x){data[x.name] = x.value;}); 
return data;
}

function send(url, formId) {

var data = grabForm(formId);

$.ajax({
    url: url,
    ...
});
}

function onSubmit(idform, fn) {
$(idform).submit(function(event) {
event.preventDefault();
fn();
});
}

问题在于抓取东西函数它返回一个空对象，但在此形式之前它是序列化函数。

在另一个测试中，我只是从SO中复制粘贴代码：

    $('#organisationform').submit(function () {
  var $inputs = $('#organisationform :input');

// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
    values[this.name] = $(this).val();
});

 alert(values);
  //Do stuff with view object here (e.g. JSON.stringify?)
});

同样的问题。

那怎么解决这个问题呢？或者我该怎么做？

Answer 1

似乎你正在将jQuery函数包装在你自己的函数中，这些函数实际上似乎没有添加任何值，但是过于复杂的事情，特别是使范围不确定并使控制流难以遵循。

这应该足以通过ajax提交表单：

$("form#organisationform").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: "http://localhost:8080/organisation/ajouter",
    data: $(this).serialize(), //serialise the form, which due to the scope can be fetched via 'this',
    method: "POST", //assuming it's a POST, but set it to whatever is right for your server
    success: function(data) {
      console.log(data); //receive any response from the server
    },
    error: function(jQXHR, textStatus, errorThrown) {
      console.log(errorThrown + " " + textStatus); //log any HTTP errors encountered
    }
    //...etc
  });
});

您可能需要根据服务器期望接收的内容进行调整。

Answer 2

哎哟！我用name属性而不是id更改了输入，现在它可以抓住东西了！

用jquery抓取表单不起作用

2 个答案: