Javascript 如何在html中添加Onclick_Javascript_Html_Ajax

Javascript 如何在html中添加Onclick

javascript html ajax

Javascript 如何在html中添加Onclick,javascript,html,ajax,Javascript,Html,Ajax,我有一个html代码。我想在html代码中为按钮名GET DATA实现onclick。另外，当我单击按钮“获取数据”时，我想将userId和categoryId数据发送到php文件中请把这个加在我的密码上。这是我的密码 <html> <header> <title>Hello World </title> </header> <body> <!--javascript make ap

我有一个html代码。我想在html代码中为按钮名

GET DATA

实现

onclick

。另外，当我单击按钮“获取数据”时，我想将

userId

和

categoryId

数据发送到php文件中请把这个加在我的密码上。这是我的密码

<html>
<header>
    <title>Hello World
    </title>
    </header>
<body>





<!--javascript make append table data-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {

var user = document.getElementById("userId").value;
var category = document.getElementById("categoryId").value;
alert (user);
alert (category);
   $.getJSON('myphp.php',{"userId":'user',"categoryId":'category'}, function(data) {
 $.each(data.videoLectureListing, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;

         var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");

     });

   });

});
</script>




<!--javascript  append table data ended -->

















<!-- user form -->
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
<!-- user form -->
















<!--table-->

<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
  <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

<!--table data end-->


</body>
</html>


你好，世界
$（函数（）{
var user=document.getElementById（“userId”）.value；
var category=document.getElementById（“categoryId”）.value；
警报（用户）；
警报（类别）；
$.getJSON（'myphp.php'，{“userId”：'user'，“categoryId”：'category'}，函数（数据）{
$。每个（数据、列表、函数（i、f）{
变量链接=”https://www.youtube.com/embed/“+f.视频；
var tblRows=“”+”+f.videoName+++f.date+++++f.time+++f.videoDuration++++；
$（tblRows）。附加到（“#userdata tbody”）；
});
});
});
用户ID
类别
获取数据
视频名称
日期
时间
持续时间
链接

给按钮一个id，并将类型从提交更改为按钮：

<button id="myButton type="button" >GET DATA</button>

有关ajax和PHP的更多信息，请参见此处：

代码的最短版本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
$("body").on("submit","form", function(){
    let fdata= new FormData($("form")[0]);
   alert(fdata);

$.ajax({type:'GET',url:'myphp.php',data:fdata, success: function (data){
     $.each(data.videoLectureListing, function(i, f) {
      var link = "https://www.youtube.com/embed/"+ f.video;
      var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
$("#userdata tbody").empty();

$(tblRows).appendTo("#userdata tbody");
     });
}});
}
</script>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
   <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>


用户ID
类别
获取数据
$（“body”）。关于（“提交”、“表格”和“函数”）{
设fdata=newformdata（$（“form”）[0]）；
警报（fdata）；
$.ajax（{类型：'GET'，url:'myphp.php'，数据：fdata，成功：函数（数据）{
$。每个（数据、列表、函数（i、f）{
变量链接=”https://www.youtube.com/embed/“+f.视频；
var tblRows=“”+”+f.videoName+++f.date+++++f.time+++f.videoDuration++++；
$（“#userdata tbody”）.empty（）；
$（tblRows）。附加到（“#userdata tbody”）；
});
}});
}
视频名称
日期
时间
持续时间
链接

谢谢解决了我的问题。我还有一个问题，我想在用户输入其他id时清除表中显示的数据，然后在当前数据下追加感谢解决了我的问题。我还有一个问题，我想在用户输入其他id时清除表中显示的数据，然后追加如你所说，在当前数据下，我更新了我的答案。希望这能帮助你回答你的问题吗？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
$("body").on("submit","form", function(){
    let fdata= new FormData($("form")[0]);
   alert(fdata);

$.ajax({type:'GET',url:'myphp.php',data:fdata, success: function (data){
     $.each(data.videoLectureListing, function(i, f) {
      var link = "https://www.youtube.com/embed/"+ f.video;
      var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
$("#userdata tbody").empty();

$(tblRows).appendTo("#userdata tbody");
     });
}});
}
</script>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
   <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>