当'.submit'函数被覆盖（使用ajax）时获取数据到php？

I have overridden the .submit function of a form on this web-page, because the webpage is loaded inside the #mainContent in an "index.php", and I want the Submit button to replace only this #mainContent.

我在这个网页上覆盖了表单的.submit函数,因为网页是在“index.php”的#mainContent里面加载的,我希望Submit按钮只替换这个#mainContent。

I am trying to get the data from this form to a .php file in order to make queries to a database (or simply echo populated variables, to indicate that data was passed).

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

I am very new to AJAX. Can someone explain to me how to pass the data to the .php file, or point me to a resource that will give me some clarification?

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

Right now I'm simply trying to pass a string to a variable and echo it back.

现在我只是试图将一个字符串传递给一个变量并回显它。

Could someone clarify what the first element in the "data: {thisElement: notThisOne}," refers to? Is it the "name" of an attribute in the form? The name of the variable it will be passing to the php script in the 'url:' ?

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

Thanks for clarify this.

谢谢你澄清一下。

Here is my 'search.html' file (which is embedded in another 'index.php' file):

这是我的'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>

The '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");              
           }
        }) ;
     });
  });

Finally, the 'php_test.php':

最后,'php_test.php':

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

     $courseSelect = $_POST['courseSelect'];

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

Am I collecting the data in the php_test.php incorrectly? Or assigning it in the 'data: {},' (of searchGo.js) incorrectly?

我是否错误地收集了php_test.php中的数据?或者在'data:{},'(searchGo.js)中错误地分配它?

Thanks for clarification.

谢谢你的澄清。

2 个解决方案

#1

First you shouldn't perform a search with POST, you are not modifying states(Deleting or updating records). Use a GET request instead.

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

The data in the ajax request is what you want to pass to the request. Use jQuery serialize that encodes a set of form elements as a string for submission.

ajax请求中的数据是您要传递给请求的数据。使用jQuery serialize将一组表单元素编码为提交字符串。

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

Now, in your php file you should be looking at the $_GET. Something like this:

现在,在你的php文件中,你应该看看$ _GET。像这样的东西:

$courseSelect = $_GET['courseSelect'];

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

#2

PHP try:

echo json_encode($courseSelect);

Javascript: I'm not seeing where $lecOrLab is defined? Also for the success method, you're not getting the response correctly. Try this:

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

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

    // do stuff with resp              
}

#1