2016-08-13 3 views
1

저는 jQuery를 처음 접했고 그걸로 연습하고 있습니다. 나는이 HTML 간단한 페이지를했습니다 :jQuery를 사용하여 쿼리 결과를 선택하십시오.

<html> 
<head> 
    <title> Testing jQuery 
    </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="script.js" type="text/javascript"></script> 
    <link href="mycss.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <h2 id="myH"> This is a title.</h2> 
    <br> 
    <br> 

    <fieldset> 
     <legend>Data</legend> 
     <form name="myForm"> 
      <input type="text" id="firstData" placeholder="Write something in here" \> 
      <br> 
      <br> 
      <input type="text" id="secondData" placeholder="Write something else in here" \> 
      <br> 
     </form> 
     <button id="formButton" value="Confirm">Confirm</button> 
    </fieldset> 
<br><br><br> 
    <div id="myDiv"></div> 
</body> 

</html> 

이 PHP 스크립트 :

<?php 

/* Connection to DB*/ 
.... CONNECTIONS STUFF......... 

$query = " SELECT * FROM table1;"; 
$results = mysql_query($query); 
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>"; 
while($row = mysql_fetch_array($results)) { 
    ?> 
    <tr> 
     <td> 
      <?php echo $row['ID']?> 
     </td> 
     <td> 
      <?php echo $row[ 'First']?> 
     </td> 
     <td> 
      <?php echo $row[ 'Second']?> 
     </td> 
    </tr> 
    <?php 
    } echo "</table>"; ?> 

그리고 마지막으로이 코드 JS :

$(function() { 
     $('#formButton').on('click', function (e) { 
      var firstData = $('#firstData').val(); 
      var secondData = $('#secondData').val(); 
      var query = 'first=' + firstData + '&second=' + secondData; 
// Here I use another php script. 
      $.get('myData.php', query, function (data) { 
       $('#myDiv').html(data); 
      }); 
     }); 
     $('#formButton').on('click', function (e) { 
      $.ajax({ 
       url: "myquery.php", 
       type: "POST", 
       success: function (data) { 
        $("#myDiv").empty().html(data); 
       } 
      }); 
     }); 
    }); 

좋아 지금은 삽입 한 것을 모든 코드를 , 문제는 myData.php 스크립트를 사용하여 데이터베이스에 요소를 추가 할 수 있지만 맨 위에 요소를 추가 할 수있는 페이지를 작성하고 맨 아래의 확인 버튼을 클릭하면) 모든 콘테 테이블의 nts가 표시됩니다. 그래서 요소를 추가 할 수는 있지만 요소를 표시 할 수는 없습니다. 저는 jQuery에 익숙하지 않고 그것을 작동 시키려고 노력하고 있습니다. 웹에서 다른 연구를했지만 문제를 해결할만한 것을 찾을 수 없었습니다. 누군가 나를 기쁘게 할 수 있었습니까? 감사!

답변

1

당신은 바로 myData.php

$query = " SELECT * FROM table1;"; 
$results = mysql_query($query); 
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>"; 
while($row = mysql_fetch_array($results)) { 
    ?> 
    <tr> 
     <td> 
      <?php echo $row['ID']?> 
     </td> 
     <td> 
      <?php echo $row[ 'First']?> 
     </td> 
     <td> 
      <?php echo $row[ 'Second']?> 
     </td> 
    </tr> 
    <?php 
    } echo "</table>"; ?> 

이 아약스 호출의 필요 없음에 삽입 기록 후 코드 아래에 넣어 단일 파일 myData.php

에 의해 모두 작업을 할 수 있습니다. 두 번째 버튼을 클릭하고 jquery 코드를 클릭합니다. 첫 번째 버튼 클릭 이벤트에서 myData.php 파일이 호출됩니다. 첫 번째 레코드가 기존 코드와 함께 DB 테이블에 삽입됩니다. DB에서 레코드를 가져 오기 위해 코드를 배치 한 후. 귀하의 HTML은 응답으로 보내지고 그 HTML을 기존 jquery 코드로 DIV에 넣습니다. 당신이 http://www.w3schools.com/jquery/jquery_ajax_load.asp

단지 현재 페이지

에 사업부 거기에서 사업부를로드하기위한

+0

고마워요! 그것은 완벽하게 작동하기 때문에 두 가지 다른 아약스 요청간에 일종의 갈등이 발생 했습니까? –

+0

예, 두 개의 Ajax 요청에 대해 비동기 false로 만들어야합니다. 따라서 두 번째 아약스는 첫 번째 완료 후 해고됩니다. –

+0

Perfect! 감사합니다 :) –

0

당신은 비디오 튜토리얼이 URL을 매우에 따라 매우 쉽고, 그것을 위해 JQuery와로드 기능을 사용할 수 있습니다 간단한, 여기 사업부를 사용 후 ID를 입력하고로드 페이지에서,이 페이지 DIV

https://www.youtube.com/watch?v=mtz8MdQXhno

에 다른 ID를 사용하고 ID를로드하십시오 그것은 워드 프레스에서 작동하고 단순히 PHP에서 작동합니다 동일 코드

+0

고마워, 또 다른 가능한 해결책을하지만 나는 대답 한 첫 번째를 표시했습니다! 고마워요. –

+0

시원함, 문제 없음 –

관련 문제