Javascript 使用AJAX在页面上自动提交表单并获得html类型的结果?

Javascript 使用AJAX在页面上自动提交表单并获得html类型的结果?,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在尝试使用ajax在页面加载时自动提交表单,然后将HTML(将在ajax URL上回显的一组div)返回到我的ajax页面 首先,我的代码自动提交表单,但它将忽略AJAX调用,因此用户将被带到表单的操作页面 此外,如果我从AJAX代码中删除自动提交代码,并通过提交按钮手动提交表单,那么AJAX URL页面将不会返回任何内容 这是我的全部代码: window.onload = function(){ document.forms['myformR'].submit() // thi

我正在尝试使用ajax在页面加载时自动提交表单,然后将HTML(将在ajax URL上回显的一组div)返回到我的ajax页面

首先,我的代码自动提交表单,但它将忽略AJAX调用,因此用户将被带到表单的操作页面

此外,如果我从AJAX代码中删除自动提交代码,并通过提交按钮手动提交表单,那么AJAX URL页面将不会返回任何内容

这是我的全部代码:

window.onload = function(){
document.forms['myformR'].submit()  


  // this is the id of the form
    $("#myformR").submit(function() {

        var url = "results.php"; // the script where you handle the form input.

        $.ajax({
               type: "POST",
               url: url,
                dataType: "html", //expect html to be returned                
                success: function (response) {
                    $("#prores").html(response);


                }
             });

        return false; // avoid to execute the actual submit of the form.
    });

}
如有任何建议,将不胜感激

编辑,这是我的ajax PHP URL页面:

<?php
session_start();
?>
<?php
include "config/connect.php";
$searchList = "";
$clause = " WHERE ";//Initial clause
$sql="SELECT *
FROM `yt`
INNER JOIN `ATTRIBUTES` ON yt.subcats=ATTRIBUTES.type";//Query stub
if(isset($_POST['submit'])){
    if(isset($_POST['keyword'])){
        foreach($_POST['keyword'] as $c){
            if(!empty($c)){
                ##NOPE##$sql .= $clause."`".$c."` LIKE '%{$c}%'";
                $sql .= $clause . " (ATTRIBUTES.sizes LIKE BINARY '$c' OR ATTRIBUTES.colors LIKE BINARY '$c' OR ATTRIBUTES.type LIKE BINARY '$c')";
                $clause = " OR ";//Change  to OR after 1st WHERE
            }
        }
        $sql .= " GROUP BY yt.id ";
        //print "SQL Query: $sql<br />"; //<-- Debug SQl syntax.
        // Run query outside of foreach loop so it only runs one time.
        $query = mysqli_query($db_conx, $sql);
        //var_dump($query); //<-- Debug query results.
        // Check that the query ran fine.
        if (!$query) {
            print "ERROR: " . mysqli_error($db_conx);
        } else {
            // Use $query inside this section to make sure $query exists.
            $productCount = mysqli_num_rows($query);
            $i=0; // count the output amount
            if ($productCount > 0) {
                while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
        $sizesOption ="";
        $colorOption ="";
             $id = $row["id"];
             $product_name = $row["product_name"];
             $details = $row["details"];
             $details = preg_replace("/\\\\r\\\\n/", "", $details);
             $price = $row["price"];
             $category = $row["category"];
             $manu = $row["manu"];
             $sizez = $row["sizez"];
             $colours = $row["colours"];
             $colours = preg_replace('/\.$/', '', $colours);
             $sizez = preg_replace('/\.$/', '', $sizez); //Remove dot at end if exists
             $array = explode(',', $sizez);
             $arrayC = explode(',', $colours); //split string into array seperated by ','
             foreach($array as $value) //loop over values
             {
                 //echo $value . PHP_EOL; //print value
                 $sizesOption .='<option>'.$value.'</option>';
              }
            foreach($arrayC as $valueC) //loop over values
             {
                 //echo $value . PHP_EOL; //print value
                 $colorOption .='<option>'.$valueC.'</option>';
              }
                   $searchList .= '<div align="center" class="mypro" style="position:relative; width:270px; height:470px; border:solid 1px #CCC; margin:10px; float:left; overflow:hidden; padding:5px;">

<a class="overlay" href="product.php?id='.$id.'"></a>

<!--<a class="overlayBtns" href="">Quick View</a>-->

<div class="overlayAdd">



            <a style="font: bold 11px Arial;
  text-decoration: none; background-color: #FFF; color: #333333; padding: 10px; border:none; border-radius:4px; width:120px; height:30px;" id="go" rel="leanModal" name="test" href=".test'.$id.'">Qick View <i style="color:#000; font-size:18px;" class="fa fa-eye"></i></a>



           <div  style="display:none; display:none; width:580px; height:auto; background-color:#FFF; border-radius:4px; padding:12px;" class="test'.$id.'">


           <h2>'.$product_name.'</h2>

         <p style="text-align:left;">'.$details.'</p>
         <form id="form'.$id.'" class="form1" name="form1" method="post" action="cart.php">
         <p>
         <p style="text-align:left; font-weight:bold;">Size</p>
         <select id="sizeSelect"  name="sizeSelect" style="">
         '.$sizesOption.'
         </select>


         <p style="text-align:left; font-weight:bold;">Colour</p>
         <select id="colorSelect" name="colorSelect" style="">
         '.$colorOption.'
         </select>

         </p>
        <p style="text-align:left; font-weight:bold; width:100px; float:left;">Quantity</p> 
             <input min="1" type="number" id="quantity" name="quantity" value="1" />
        </p> 
        <p>
        <input type="hidden" name="pid" id="pid" value="'.$id.'" />
        <input type="hidden" name="moneyPrice" id="moneyPrice" class="moneyPrice" value="" />
        <input type="hidden" name="moneyCurreny" id="moneyCurreny" class="moneyCurreny" value="" />
        <input style="background-color:#000; color:#FFF;" type="submit"  value="ADD TO BASKET" />

      </form></p>
      <br><br>
      <a href="product.php?id='.$id.'">View Item Full Details</a><br><br>

<div class="share-buttons" data-url="http://enzua.com/product.php?id='.$id.'" data-text="http://enzua.com/product.php?id='.$id.'"></div>

        </div></div>


<img width="100%" src="product_images/'.$id.'Image1.jpg" alt=""  />


<p style="padding:2px;">'.$product_name.'</p>
<p style="padding:2px;">'.$manu.'</p>

    <div style="padding:5px;" class="price">

      <div class="prod-price"><span class=money>£'.$price.'.00</span></div>
    </div>

</div>';
                }
            }
        }
    }
}

?>
<?php 
echo $searchList;
exit(); 
?>

使用下面的代码

 $(window).load(function(){
 // this is the id of the form
    var url = "results.php"; // the script where you handle the form input.
    $.ajax({
           type: "POST",
           url: url,
           data:$( "#myformR" ).serialize(),
           dataType: "html", //expect html to be returned                
           success: function (response) {
                $("#prores").html(response);
            }
         });
});

如果我正确地理解了您的问题,您只想在页面加载时提交表单,而当前您的代码并没有通过ajax提交表单。 你能试试下面的代码吗

$("#myformR").submit(function(e) {
  e.preventDefault();
  // your code
}

我想你需要的是这个

$(“#myformR”).submit(函数(){
var url=“results.php”;//处理表单输入的脚本。
$.ajax({
类型:“POST”,
url:url,
数据:新表单数据(本),
processData:false,
contentType:false,
数据类型:“html”,//希望返回html
成功:功能(响应){
$(“#prores”).html(回复);
}
});
return false;//避免执行表单的实际提交。

});不要使用提交。不使用submit,您可以使用$(“#myformR”)获取表单数据
$("#myformR").submit(function(e) {
  e.preventDefault();
  // your code
}