文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将ajax表单提交到不同的url

问如何将ajax表单提交到不同的url
EN

Stack Overflow用户

提问于 2014-08-22 15:44:38

回答 1查看 3.1K关注 0票数 0

我有一个ajax表单，其中select控件实际上调用ajax函数并动态地设置其他控件。submit按钮现在根本不工作，但我需要它将表单提交到操作url，通常不提交到ajax url。

这是如何正确完成的呢？

更新：-- urls在同一个域中。

这是表格：

<div class="sidebar quick-search">

  <h3><span class="color-primary">Quick</span> Search</h3>

  <form role="form" id="searchform" method="post" action="[[~99]]">


  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Manufacturer:</label>
          <select class="form-control input-sm filter-group" data-filter-group="make" id="vehiclemake" name="vehiclemake" >
              [[+vehiclemake]]
          </select>
          </div>
      </div>
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Model:</label>
          <select class="form-control input-sm filter-group" data-filter-group="model" id="vehiclemodel" name="vehiclemodel" >
              [[+vehiclemodel]]
          </select>
          </div>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Year:</label>
          <select class="form-control input-sm filter-group" data-filter-group="year" id="vehicleyear" name="vehicleyear" >
              [[+vehicleyear]]
          </select>
          </div>
      </div>

      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Body Type:</label>
          <select class="form-control input-sm filter-group" data-filter-group="bodytype" id="vehiclebodytype" name="vehiclebodytype" >
              [[+vehiclebodytype]]
          </select>
          </div>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputEmail1">Transmission:</label>
          <select class="form-control input-sm filter-group" data-filter-group="transmission" id="vehicletransmission" name="vehicletransmission" >
              [[+vehicletransmission]]
          </select>
          </div>
      </div>
      <!--div class="col-xs-6">
          <div class="form-group">
          <label for="exampleInputPassword1">Mileage:</label>
          <select class="form-control input-sm filter-group" data-filter-group="mileage" id="exampleInputEmail1" name="select" >
                [[+vehiclemileage]]
          </select>
          </div>
      </div-->
  </div>

  <div class="row">
      <div class="col-xs-6">
          <div class="form-group submit">
          <button type="button" class="btn btn-primary form-control input-sm" id="search-form-search">Search</button>
          </div>
      </div>

      <div class="col-xs-6">
          <div class="form-group submit">
          <button type="reset" class="btn btn-primary form-control input-sm" id="search-form-reset" >Reset</button>
          </div>
      </div>
  </div>

  </form>

</div>

和ajax位：

$('.filter-group').change(function() {

    var form = $('#searchform');

    $.ajax({
        type: "POST",
        //url: form.attr( 'action' ),
        url: '[[~131]]',
        data: form.serialize(),
        dataType  : "json",
        cache: false,


        beforeSend: function() {
            console.log( 'before send' );
        },

        success: function(data, status) {

            $.each(data, function( key, value ) {

                //console.log(key);

                populateSelectControls(key, value);

            });

        },

        error: function(data){
            //this would be a 404 error!    
            console.log('hellooo - this is an error!!!');
        }
    });
});


function populateSelectControls(optKey, optValues){

    var $control = $('#' + optKey);

    $control.empty(); 

    //$control.append($("<option></option>").attr('value', 'null'));
    $control.append($("<option></option>").attr('value', '').text('select/clear'));

    $.each(optValues, function(key, value) {

        //console.log('key = ' + key + ' value = ' + value);

        //var mycontrol = $control.append($("<option></option>").attr("value", '.'+key).text(key));

        $("<option />", {
            value: '.' + key,
            text: key,
            selected: value === 'selected'
        }).appendTo($control);

    });

jquery

ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-22 16:16:56

就像这样？

jQuery('#search-form-search').click(function() {
    var form = jQuery('#searchform');
    var url = jQuery('#searchform').attr('action');
    jQuery.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType  : "json",
        cache: false
    });
});

其实我觉得你可以这么做：

  jQuery('#search-form-search').click(function() {
        jQuery( "#searchform" ).submit();
     });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25450831

复制

相似问题

问如何将ajax表单提交到不同的url
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将ajax表单提交到不同的urlEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将ajax表单提交到不同的url
EN