使用ajax发布序列化的表单数据

Question

我有这个表单

<div class="tab-pane" id="trade">
<br/>
<div class="well">There are currently a total of <b>$traders traders</b> and this session has a total of <b>Ksh $total</b> you can earn this very minute.</div>
<form class="form-horizontal" name="trade">
<br/>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Telephone Number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="Enter Telephone Number" name="telephone"  required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Id Number:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="email" placeholder="Enter Id Number" name="nid"  required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Amount:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="email" placeholder="Enter Amount" name="amount"  required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Direction:</label>
<div class="col-sm-10">
<select class="form-control" name="direction"><option value="up">Up</option><option value="down">Down</option></select>
</div>
</div>
<div class="form-group">        
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success pull-right">Submit</button>
</div>
</div>
</form>
</div>

我有这个作为我的jquery

$(document).ready(function(){
var datastring = $("#trade").serialize();
$.ajax({
type: "POST",
url: "http://localhost/lords/trade.php",
data: datastring,
dataType: "json",
success: function(data) {
alert(data);
},
error: function() {
}
});
});

然而，我并没有停止默认，表单会重新加载，并且不会发布任何数据。

我试过这个

var frm = $('#trade');
frm.submit(function (ev) {
$.ajax({
type: 'post',
url: 'http://localhost/lords/trade.php',
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
ev.preventDefault();
});

但这并没有公布数据。我使用的是jquery 3.3.1

这是小提琴https://jsfiddle.net/e3zc1gpb/3/

Answer 1

在表单标签上添加id="name"，或更改

var frm = $('#trade'); 

至

var frm = $('form[name="trade"]')