使用jquery在网格中加载数据

我正在使用jqwidgets。有一个很好的网格小部件在那里我想使用。要使用网格，我使用演示代码：

   $(document).ready(function () {
        var theme = getTheme();
        var url = "../sampledata/data.php";
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'firstname' },
                { name: 'lastname' },
                { name: 'productname'},
                { name: 'quantity', type: 'int' },
                { name: 'price', type: 'float' },
                { name: 'total', type: 'float' }
            ],
            id: 'id',
            url: url,
            root: 'data'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: dataAdapter,
            theme: theme,
            columnsresize: true,
            columns: [
              { text: 'First Name', dataField: 'firstname', width: 100 },
              { text: 'Last Name', dataField: 'lastname', width: 100 },
              { text: 'Product', dataField: 'productname', width: 180 },
              { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
              { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
              { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
            ]
        });
    });

那很好用。但现在我想在按下表单中的按钮时加载网格

<form action="" method="post">
<select name="city">
<option value="amsterdam">amsterdam</option>
<option value="rotterdam">rotterdam</option>
<option value="denhaag">den haag</option>
<option value="eindhoven">eindhoven</option>
</select>
<input name="Submit" type="submit" value="Find family" /></form>

阿姆斯特丹
鹿特丹
登哈格
埃因霍温

因此，当我选择amsterdam时，它应该将data.php？city=amsterdam加载到网格中

我可以使用iframe来实现这一点，但有没有一种方法可以在一个页面中完成，而我只需要重新加载网格？

JS:

$(document).ready(function () {
  $("#submit").click(function(){
    var theme = getTheme();
    var url = "../sampledata/data.php?city="+$("city").val();
    // prepare the data
    .............
  })      

});

HTML:

.....

差不多了。它在单击时加载，但加载后立即隐藏

<select name="city" id="city">
  .....
</select>
<input name="Submit" type="submit" value="Find family" id="submit" /></form>