javascript - A problem with using jquery's ajax and php together to achieve non-refresh form submission

The picture is my page. After opening the homepage link, the main part (black box on the left) is displayed;
The subpage on the right (the subpage obtained through ajax in the div#main_box on the right)
When the homepage link is just opened Display the subpage loaded when pressing the button

Now I have a form in subpage 2 that is loaded when button 2 is pressed. I need to submit the form and then get the value submitted by the form through PHP, then go to the database to query the information, return the database data and then output it to this subpage 2. I don’t know. How to achieve.

I found this method after searching online for a long time:

<code><form action="teacher.php" method="post">
      <p>学期</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>

But I don’t know how to use it, please give me some advice

Reply content:

The picture is my page. After opening the homepage link, the main part (black box on the left) is displayed;
The subpage on the right (the subpage obtained through ajax in the div#main_box on the right)
When the homepage link is just opened Display the subpage loaded when the button is pressed

Now I have a form in subpage 2 that is loaded when I press button 2. I need to submit the form and then get the value submitted by the form through PHP, then go to the database to query the information, return the database data and then output it to this subpage 2. I don’t know. How to achieve.

I searched online for a long time and found this method:

<code><form action="teacher.php" method="post">
      <p>学期</p>
      <select name="xueqi" id="xueqi">
            <option value="201520161">2015-2016学年第一学期</option>
            <option value="201520162">2015-2016学年第二学期</option>
            <option value="201620171">2016-2017学年第一学期</option>
      </select>
</form>
<script>
$(function(){
$("#jiansuo").click(function(){
             var xueqi = $("#xueqi").val();//取得表单的值
             var one = $("#one").val();
             var one_week = $("#one_week").val();
             var more = $("#more").val();
             var more_week_num = $("#more_week_num").val();
             var more_week_ba = $("#more_week_ba").val();
             var xingqi = $("#xingqi").val();
             var banji = $("#banji").val();
            //Ajax post数据
            $.ajax({
             type: "POST",//Ajax请求为post
             url: "teacher.php?c=fankui",//ajax请求URL 脚本地址
             data: {"xueqi":xueqi,"one":one,"one_week":one_week,"more":more,"more_week_ba":more_week_ba,"xingqi":xingqi,"banji":banji}, //传递的值
             success:  function(data){  //回调函数 这里的data你可以返回HTML也可以是JSON 为了简单你返回HTML就可以了。
              $("#main_right_box").html("").html(data);//将返回的列表插入分类.
             }
            });
           });

}
</script>
</code>

But I don’t know how to use it, please give me some advice

1. Use the iframe function. The element of button two is an a tag. Display it as you want the button to look like. Add the target attribute, so that your second requirement is naturally solved.

   <code>  <a href="相应的url" target="main_box_frame">按钮二</a>
     <div id="main_box"><iframe name="main_box_frame"></iframe></div></code>

2. Add a click event to the second label of the button, get the content to be displayed in the main_box through ajax, and add it to the main_box, then tie it to the submit event on the retrieved form, and insert the response from the form submission into in main_box.

My approach is to disable the default submission event, use jq's ajax to send the request, and use data:
$(formSelector).serialize() for the form data, so there is no need to read the value separately, and refresh the page through the callback function.

I know this, let’s put it this way, what ajax returns is actually what is printed in your teacher.php. Taking the dataType format as html as an example, you can do a test in that teacher.php and directly echo '

Hi, I want to be passed back

', and then return to this success:function(data){alert(data)};//See what it is, if it is json, then teacher.php The only data that can be output is echo json encode($array); here it is dataType:'json'
//I don’t know if I wrote it wrong= =#
//By the way, you have to add an onsubmit=' to that form return checnkForm()';Write ajax in the checkForm() function, and finally return false, otherwise the form submission will jump a bit

<code>$.ajax({
url:"teacher.php?c=fankui",
type:"post",
data:{"xx":"xx"},
dataType:'html',
success:function(data){
//数据加载成功
},
error:function(){
//数据加载失败
}
});
</code>