Question

我已经覆盖了此网页上表单的.submit函数，因为网页是在“index.php”中的#mainContent中加载的，我希望“提交”按钮只替换此#mainContent。 / p>

我正在尝试将此表单中的数据转换为.php文件，以便对数据库进行查询（或者只是回显填充的变量，以指示数据已通过）。

我是AJAX的新手。有人可以向我解释如何将数据传递给.php文件，或者指向一个能给我一些澄清的资源吗？

现在我只是尝试将字符串传递给变量并将其回显。

有人可以澄清“数据中的第一个元素：{thisElement：notThisOne}”是指什么？它是表单中属性的“名称”吗？它将传递给'url：'中的php脚本的变量的名称？

感谢您澄清此事。

这是我的'search.html'文件（嵌入另一个'index.php'文件中）：

  <!DOCTYPE html>
  <html>
  <head>

  </head>
  <body>
     <div class="main" data-role="content" id="main">
        <div id="holder">
           <h1>Search</h1>
            <div class="left">

              <form name="searchForm" id="searchForm" onsubmit="return false;">

              <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                 <legend><h3>Course</h3></legend>
                 <select name="courseSelect" id="courseSelect" name="courseSelect">
                    <option value="*">All</option>
                    <option value="COMM2216">COMM-2216</option>
                 </select>
              </fieldset>

                 <p>
              <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                       <legend><h4>Type:</h4></legend>
                       <input type="radio" name="lecLab" value="lec" id="lec"/>
                          <label for="lec">Lecture</label>
                       <input type="radio" name="lecLab" value="lab" id="lab">
                          <label for="lab">Lab</label>
                       <input type="radio" name="lecLab" value="*" id="both" checked="checked">
                          <label for="both">Both</label>

                    <p>
                    </fieldset>
                    <input type="submit" value="Go">

              </form>
            </div>
        </div>
     </div>
  <script src="./scripts/searchGo.js"></script>
  </body>
  </html>

'searchGo.js'：

  $(document).ready(function() {
     $("#searchForm").submit(function(e)
        {
        //e.preventDefault();
        $.ajax({
           type: "POST",
           url: "./scripts/php_test.php",
           data: {courseSelect: "Lecture, or Lab?"},
           success: function(){
              alert($lecOrLab);
              $("#holder").load("./scripts/php_test.php");              
           }
        }) ;
     });
  });

最后，'php_test.php'：

  <html>
  <head>
  </head>
  <body>
  <?php

     $courseSelect = $_POST['courseSelect'];

     echo ($courseSelect);
  ?>
  </body>
  </html>

我是否错误地收集了php_test.php中的数据？或者在'data：{}，'（searchGo.js）中错误地分配它？

感谢您的澄清。

Answer 1

首先，您不应该使用POST执行搜索，而不是修改状态（删除或更新记录）。请改用GET请求。

ajax请求中的数据是您要传递给请求的内容。使用jQuery序列化将一组表单元素编码为字符串以进行提交。

$.ajax({
       type: "GET",
       url: "./scripts/php_test.php",
       data: $("#searchForm").serialize(),
       success: function(data){
         $("#holder").html(data);              
       }
});

现在，在你的php文件中，你应该看看$ _GET。像这样：

$courseSelect = $_GET['courseSelect'];

//now query your db and return your results based on your form  fields.

Answer 2

PHP尝试：

echo json_encode($courseSelect);

Javascript：我没看到$ lecOrLab定义在哪里？同样对于成功方法，您没有正确获得响应。试试这个：

success: function(response){
    var resp = $.parseJSON(response);
    console.log(resp);

    // do stuff with resp              
}

当<form>＆＃39; .submit＆＃39;函数被覆盖（使用ajax）？</form>

2 个答案: