使用jQuery获取发布的数据

I want to get posted data using jquery. I have implemen

Html Form

      <form  id="login_form" action="userPref.php" method="post" >

      <div hidden id="error" style="color:red; text-align:center;"   > <p> user not found  </p>   </div>
        <div class="form-group">
          <label for="usrname"><span class="glyphicon glyphicon-user "></span> User Id</label>
          <input type="text" value="" class="form-control" required="required" id="usrname" name="usrname" placeholder="Enter User Id" >
        </div>

          <button type="submit"  id="login" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
      </form>

In userPref.php I am using php to get data but I actually want to use jquery

    var userid = <?php echo $_POST["usrname"] ?>;

I have also tried to access the form data using jquery but I was not able to access the data. Please help me.

POST data is data that is handled server side. And Javascript/jQuery is on client side. So there is no way you can read a post data using JavaScript/jQuery.

But good way is

var post_data= <?php echo json_encode( !empty($_POST) $_POST : array());?>;

now you can access $_POST['username'];

alert(post_data.username);

so you can access all posted data in this way.

$("form").serializeArray();

See Documentation: http://api.jquery.com/serializeArray/

check this :

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="results"></div>

        <form action="" method="post">
            <input typte="text" name="uName" /> <input typte="password"
                name="passKey" /> <input type="submit" />
        </form>
        <script type="text/javascript">
                $('form').submit(function(e){
                    if(this.uName.value != ''){
                        alert(this.uName.value);
                    }
                    if(this.passKey.value != ''){
                         alert(this.passKey.value);
                    }
                });
                </script>
    </body>

    </html>

On server side you need something like this:

<input type="text" value="" class="form-control" required="required" id="usrname" name="usrname" placeholder="Enter User Id"<?php echo isset($_POST["usrname"]) ? ' value="'.$_POST["usrname"].'"' : ''; ?> >

and then you can use it with jquery, like this:

$("#usrname").val()