变量不会通过jquery传递

时间:2017-04-26 16:14:00

标签: php jquery html ajax

我想通过说jquery的新手来这样做,所以请保持温柔。 我的问题是我需要从html页面到php页面获取一些表单变量。我尝试了以下但它不起作用。我很尴尬。请帮助。

的index.html

<script type="text/javascript">
  $(function() {
    $("#lets_search").bind('submit', function() {

      var value = $('#N_cmd').val();
      var value1 = $('#N_clt').val();

      var value3 = $('#zone').val();
      $.post('process.php', {
        value: value,
        value1: value1,

        value3: value3
      });

      return false;
    });
  });
</script>


<script>
  function viewData() {
    $.ajax({

      url: 'process.php',

    }).done(function(data) {
      $('tbody').html(data)
      tableData()
      $('#example-table').dataTable()

    })

  }

  function tableData() {

    $('#example-table').Tabledit({
      url: 'process.php',
      eventType: 'dblclick',
      editButton: true,
      deleteButton: true,
      columns: {
        identifier: [0, 'id'],
        editable: [
          [1, 'name'],
          [2, 'Firstname'],
          [3, 'age']
        ]
      },

      onSuccess: function(data, textStatus, jqXHR) {
        viewData()
      },
      onFail: function(jqXHR, textStatus, errorThrown) {
        console.log('onFail(jqXHR, textStatus, errorThrown)');
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
      },

      onAjax: function(action, serialize) {
        console.log('onAjax(action, serialize)');
        console.log(action);
        console.log(serialize);

      }
    });




  }
</script>

</head>

<body onload="viewData()">

  <div class="container">
        <form class='form-horizontal' id="lets_search"  action="" role='form'>




              <input class='form-control' name='N_cmd' id='N_cmd' placeholder='N° commande' type='text'>

              <select class='form-control' id='zone'>


                    <option> </option>
                    <option value="CENTRE">CENTRE</option>
                    <option value="NORD">NORD</option>
                    <option value="SUD">SUD</option>
                  </select>


                  <input class='form-control' name='id_division' id='id_division' placeholder='Division' type='text'>


            <button type="submit" id="send" name="send">Chercher</button>





    </form>

    <table id="example-table" class="table">
      <thead>
        <tr>
          <th></th>
          <th>name</th>
          <th>Firstname</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

process.php

<?php


$mysqli = new mysqli('localhost', 'user', '', 'demo');

if (mysqli_connect_errno()) {
  echo json_encode(array('mysqli' => 'Failed to connect to MySQL: ' . mysqli_connect_error()));
  exit;
}

if  (isset($_POST['value'],$_POST['value1'],$_POST['value3'])) {
echo $_POST['value'];
exit;}

1 个答案:

答案 0 :(得分:0)

HTML中没有#N_clt1元素,但您使用var value1 = $('#N_clt').val();从中提取了一个值。

尝试var value1 = $('#id_division').val();

当他们尝试使用上面的代码提取value1时,他们会获得undefined$.post会从请求中过滤undefined个值。因此,他只将valuevalue3发布到PHP脚本。

enter image description here

PHP脚本检查valuevalue1value3。由于value1不会被发送,他什么也看不见。多田。

你的帖子的评论中也提到的一点是,一旦发布了值,你就不会做任何事情。您只能调用$.post,但实际上没有对该帖子返回的内容进行任何操作。

好吧,您可以重复使用viewData函数:

$.post('process.php', {
    value: value,
    value1: value1,
    value3: value3
  }).done(function(data){
     viewData();
  });

这是它工作的最快捷方式。但它不必要地调用process.php,eww!让我们做得更好一点:

 $.post('process.php', {
    value: value,
    value1: value1,
    value3: value3
  }).done(function(data){
     $('tbody').html(data)
     tableData()
     $('#example-table').dataTable()
  });

现在它与viewData完全相同,我们只需要请求process.php一次。关键是:你必须对$ .post对process.php 的回复做点什么。

家庭作业:我们必须像$.post中那样在done的{​​{1}}回调中重复相同的代码。摘要为单独的函数,因此viewData()和回调都可以使用相同的代码而不必重复。