使用ajax在后台提交表单

Question

我有以下问题，我正在使用Prestashop，我需要一个表单来在后台提交，我已经调查了，我找到了一种用ajax做的方法，但我需要url和数据参数，我不知道如何获得它们，因为表单是这样的。

正如您所看到的，表单没有动作，数据不清晰可见，这就是我想用ajax实现的方法：

​

$(document).ready(function() {
  $("#makePdfCatalogue").submit(function(e) {
    e.preventDefault();
    var dataString = $("#makePdfCatalogue").serialize(); //this way i cant get the data
    console.log(dataString);

    $.ajax({
      type: "POST",
      url: "", //action doenst appear 
      data: dataString,
      success: function(msg) {
        console.log('working: ' + msg);
      },
      error: function(msg) {
        //console.log('not working ' + msg);
      }
    });
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="makePdfCatalogue" name="makePdfCatalogue" method="POST" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-6">
      <fieldset>
        <legend>Categorías</legend>
        <div class="form-group">
          <label class="" for="name">{l s="Selecciona la categoría/s que deseas exportar" mod="custompdfexport"}</label> {$categories_tree}
        </div>
      </fieldset>
    </div>
    <div class="col-md-6">
      <fieldset>
        <legend>Datos empresa</legend>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="" for="name">Nombre Empresa</label>
              <input type="text" name="name" placeholder={l s="Nombre Empresa..." mod="custompdfexport" } class="form-control" id="name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="" for="contact">Datos contacto</label>
              <input type="text" name="contact" placeholder={l s="Datos Contacto..." mod="custompdfexport" } class="form-control" id="contact">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="" for="logo">Logo empresa</label>
              <input type="file" name="logo" placeholder={l s="logo Empresa..." mod="custompdfexport" } class="form-control" id="logo">
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>Opciones</legend>

        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label class="" for="form-password">{l s="Diseño" mod="custompdfexport"}</label>
              <ul>
                <li>
                  <input type="radio" name="format" class="form-control" value="2" id="format-2"><label for="format-2">{l s="2 columnas" mod="custompdfexport"}</label>
                </li>
                <li>
                  <input type="radio" name="format" class="form-control" value="3" id="format-3"><label for="format-3">{l s="3 columnas" mod="custompdfexport"}</label>
                </li>
                <li>
                  <input type="radio" name="format" class="form-control" value="4" id="format-4"><label for="format-4">{l s="4 columnas" mod="custompdfexport"}</label>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-5">
            <div class="form-group">
              <label class="" for="form-password">Opciones</label>
              <div class="form-group"><input type="checkbox" name="options[]" class="form-control" id="opt-wt" value="wt"><label for="opt-wt">{l s="Mostrar Precios con Iva" mod="custompdfexport"}</label></div>
              <div class="form-group"><input type="checkbox" name="options[]" class="form-control" id="opt-wot" value="wot"><label for="opt-wot"> {l s="Mostrar Precios sin Iva" mod="custompdfexport"}</label></div>
              <div class="form-group"><input type="checkbox" name="options[]" class="form-control" id="opt-ref" value="reference"><label for="opt-ref">{l s="Mostrar referencia" mod="custompdfexport"}</label></div>
              <div class="form-group"><input type="checkbox" name="options[]" class="form-control" id="opt-link" value="link"><label for="opt-link">{l s="Enlazar productos con web" mod="custompdfexport"}</label></div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label class="" for="revenue">Margen comercial (%)</label>
              <input type="text" name="revenue" placeholder={l s="Margen comercial..." mod="custompdfexport" } class="form-control" id="revenue" style="width: 100px;">
            </div>
            <div class="form-group">
              <label class="" for="revenue">Descuento (%)</label>
              <input type="text" name="reduction" placeholder={l s="Descuento..." mod="custompdfexport" } class="form-control" id="reduction" style="width: 100px;">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="" for="form-password">Ordenar</label>
            <div class="form-group"><input type="radio" name="order" class="form-control" id="order-asc" value="price_asc"><label for="order-asc">{l s="Por precio de Menor a Mayor" mod="custompdfexport"}</label></div>
            <div class="form-group"><input type="radio" name="order" class="form-control" id="order-desc" value="price_desc"><label for="order-desc">{l s="Por precio de Mayor a Menor" mod="custompdfexport"}</label></div>
          </div>
          <div class="col-md-6">
            <label class="" for="form-password">Stock</label>
            <div class="form-group"><input type="checkbox" name="stock" class="form-control" id="stock" value="stock"><label for="stock">{l s="Seleccionar sólo artículos con stock"}</label></div>
          </div>
        </div>
      </fieldset>
      <br>
      <input type="hidden" name="token" value="{$token|escape:'html':'UTF-8'}" />
      <input type="submit" name="submitMakePdfCatalogue" id="submitMakePdfCatalogue" value="{l s='Generar' mod='custompdfexport'}" class="exclusive" />

    </div>
  </div>
</form>

​

任何关于如何获得这些参数的建议...

Answer 1

我已经解决了数据问题，我也知道操作是catalogue.php，但我不知道如何用url定位它，因为它在一个prestashop模块中。我尝试过这样的操作，但它显示错误500，即它不是正确的路径

​

$(document).ready(function() {
              $("#makePdfCatalogue").submit(function(e) {
                  e.preventDefault();
                  var dataString = $("#makePdfCatalogue").serialize(); //solved
                  $.ajax({
                      type: "POST",
                      headers: { "cache-control": "no-cache" },
                      url: baseDir + 'modules/custompdfexport/controllers/front/catalogue.php',//is not the correct url
                      data: dataString,
                      success: function(msg) {

                          console.log('working: '+msg);
                      },
                      error: function(msg) {

                          console.log('not working '+msg);
                      }
                  });
              })
          })

​

Answer 2

下面是获取控制器链接的方法：

Context::getContext()->link->getModuleLink('custompdfexport', 'catalogue');

在本例中，您是通过AJAX调用控制器的，因此您需要在url中传递ajax参数，如下所示：

Context::getContext()->link->getModuleLink('custompdfexport', 'catalogue', array('ajax' => true));

如果您启用了URL重写，您的URL将如下所示：

http:///en/module/custompdfexport/catalogue?ajax=true

Source