검색
검색

PHP에서 ajax로 데이터를 저장하고 새 데이터가 삽입되면 div의 색상을 변경 하시겠습니까?

debugcn 에 게시 Dev
5
바 블리 샤르마

안녕하세요 저는 값을 저장하고 내 SQL 테이블에 PHP를 사용하여 삽입하고 있지만 경고가 작동하지 않는 ajax를 사용하여 경고하려고합니다.

다음은 내 코드 demo.php입니다.

 <html>
    <head>
        <script>
        function my(){
             var name = document.getElementById("name").value;
         var last_name = document.getElementById("last_name").value;
      document.getElementsById('div1').style.backgroundColor = green;
      var dataString = 'name='+name+'&last_name='+last_name;
      $.ajax({
        type:'POST',
        data:dataString,
        url:'demo.php',
        success:function(data) {
          alert(data);
        }
      });

        }   </script>
            </head>
            <body>
    <form action="" method="post">
        <input type="text" name="name" id="name" value="" />
     <input type="text" name="last_name" id="last_name" value="" />
     <input type="submit" name="Update" id="update" value="Update" onclick="my();" />
    </form>
<div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
 </div>
    </body>
    </html>
    <?php

    include('conn.php');
     if (isset($_POST['Update'])) {
     $name = $_POST['name'];
      $last_name = $_POST['last_name'];
      echo $name;
      $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
      if(mysql_query($insert)) {
       echo "Success";
      } else {
       echo "Cannot Insert";
      }
    }?>

demo.html

<html>
<head>
</head>
<body>
<div id="div2" style="width:300px;height: 50px;background-color: yellow;" >
  </div>
</body>
</html>

여기에 내가 양식을 제출할 때 div 색상 이이 코드에서 내가 틀린 demo.html에서 변경해야합니다.

내 목표를 어떻게 달성 할 수 있습니까?

어떤 도움을 주시면 감사하겠습니다

미툰 사테 쉬

변경해야 할 사항 :

  1. $.ajaxJquery에서 제공하는 유틸리티 기능을 사용하고 있으므로 jquery를 종속성으로 추가하십시오 .
  2. Jquery를 사용할 때 요소 값을 가져오고 함수를 dom 요소에 바인딩하는 데 선택기를 사용할 수 있습니다. 소스 코드에 주석을 달았습니다.
  3. 제출 버튼이있는 양식을 사용하고 있으며 클릭시 ajax 호출을 실행합니다. 그러나 제출 버튼의 기본 동작을 방지하여 페이지가 양식을 제출하지 못하도록해야합니다. 보내다event.preventDefault();
  4. php ajax 응답 부분을 맨 위로 이동하고 exit()응답이 완료되면 호출 하십시오. 그렇지 않으면 ajax 응답에 전체 페이지 html 소스도 포함됩니다.

.

 <?php

include('conn.php');
if (isset($_POST['Update'])) {
    $name = $_POST['name'];
    $last_name = $_POST['last_name'];
    $insert = "insert into ajaxsave values('$name','$last_name')";// Do Your Insert Query
    if(mysql_query($insert)) {
        echo "Success";     
    } else {
        echo "Cannot Insert";
    }
    //Call exit as your ajax response ends here. You dont need the html source along with it.
    exit();
}
    
?>
 
 <html>
    <head>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" name="name" id="name" value="" />
            <input type="text" name="last_name" id="last_name" value="" />
            <input type="submit" name="Update" id="update" value="Update" />
        </form>
        <div id="div1" style="width:300px;height: 50px;background-color: yellow;" >
        </div>
        <!-- include jquery dependeny before your js code block -->
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>       
        
        $("#update").on("click",function(event) {
            
            //Prevent Default submit button behavour. Prevent the form from submission. 
            event.preventDefault();
            // using Jquery selectors for better readability of code. 
            var name = $("#name").val();
            var last_name = $("#last_name").val();
            $("#last_name").css("background-color","green");
            
            $.ajax({
                type:'POST',
                data:{name:name,last_name:last_name,Update:true},
                url:'demo.php',
                success:function(data) {
                  alert(data);
                }
            });
            
        });

        </script>
    </body>
</html>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관